顯示具有 html 標籤的文章。 顯示所有文章
顯示具有 html 標籤的文章。 顯示所有文章

2022-07-28

一個奇異的坑:window.alert() 作用在 android chrome app 中

 今天在協助同事處理一個問題,此問題是這樣的

網頁中使用 onScan.js 來做 barcode scanner 的動作,同事的操作的殾用帶有 scanner 功能的 android pda 開同事寫好的網頁,預設的動作是:利用 scanner 掃描某一編號而成的 QRcode,由 scanner 解析完的文字拿去到一個 json 中搜尋,若找不到資料就回饋 window.alert("查無資料") 後,就進行 window.location.reload()

此狀況,如果是在筆電或桌機的環境,使用 chrome 開網頁,然後電腦用的 scanner 是用 usb 外接的,以上的操作一切正常。

但改用帶有 scanner 的 android pda 時,window.alert() => window.location.reload() 前的動的作一切正常,但 reload() 後,想再接著掃描編號一定存在的 QRcode 時就發現怎麼掃描資料都進不去網頁中。

同事找在下處理時,是因為該 onScan.js 套件是在下推的,而 onScan.js 的用法也是在下寫的,而同事只有將相關用法寫成 js module 的方式來載入而已。

本來一開始在下還以為會不會是載入順序造成異常,但確沒發現 console 有錯誤。

後來在測試宣告時發現,假設我在 onloaded 後要求畫面上的一個 input trigger('focus') ,在reload 前,該 input 確實會出現 onfocus 的效果(假設是邊框會變深色),但 reload 後卻出現的狀況是沒有 onfocus…

交叉測試了許久才發現…原來在 android 的 chrome 中,當網頁使用 window.alert(),在按下 alert 的確定按鈕後,發現 chrome 會變成不是當前作用中的 app,等於 chrome blur 了,不是 chrome 中的網頁或該網頁的元件本來 focus 變 blur 了,而是 chrome 這個 app 不是作用中視窗了…所以該網頁中的 script 操作其實還是有在運行,只是…因為 scanner 要把掃描解析後的結果只能輸入進當前作用中的 app 畫面中…結果因為表面上畫面還是在 chrome 中,但實際上 chrome 已是非作用中的 app了…

這狀況在電腦中有點類似,你打開記事本在裡面打字,然後你滑鼠移到工具列上空白處點了一下,這次當前作用中視窗就由記事本變成了「工具列」了…

由於此狀況的坑非常特別,所以特來記錄(也許…window.confirm() 也有一樣的情況)

2020-10-31

讓網頁元件的 Event(click, change.....) 無動作的方式 - pure css

會想記錄這個主要是因為在寫網頁時會遇到需要讓 input, select, button 無動作的狀況

其實下意識會利用 disabled, readonly 的屬性來達到...可是

1) disabled - 在 form 中有 disabled 的表單元件(input, select...)會在 form submit 時不帶值

2) readonly - select 元件還是可以繼續選擇,除非把 option 都套上 disabled ,但這又會回到 disabled 不帶值的狀況


以上的說明,主要是還是希望 form submit 時要帶到值出去,所以 readonly 的使用是最符合的,但問題就在 readonly 在 select 是沒作用的…

當然,其實可以使用 javascript 來做到「無滑鼠事件, 且保留其值」的方式,只是相較之後我要說的方式來說,js 的方式複雜的多,而且我還是只用純 css 的方式完成。

[scss]
form {
  [readonly] {
    pointer-events: none;
  }
}

pointer-event 的說明可以看 mdn

展示:

2014-03-11

html 上的 mailto 格式用法

大家都知道,在 html 的 <a href=""> 中,可以使用mailto:email@address 的方式讓人點擊超連結之後會開啟自己電腦中設定的mailer (比如outlook、thunderbird 之類的)來寄信…

但通常我們只會寫
<a href="mailto:email@address">寄信</a>
這只會讓我們的mailer (outlook、thunderbird…之類)在開啟後只有幫我們預填寫了收件者的位址…

如果想要點擊之後開啟mailer時會預先填好「收件者、主旨、內容與cc或bcc」該怎麼寫?

說明參考頁:html mailto tips and tricks

想要預填好收信者與主旨
<a href="mailto:email@address?subject=這是主旨">寄信</a>
想要預填好收信者、主旨與內容
<a href="mailto:email@address?subject=這是主旨&body=這是內容">寄信</a>
不確定收信者,但要先填好主旨
<a href="mailto:?subject=這是主旨">寄信</a> 
(cc或bcc的方式可看參考頁的方式)

----
上述的方式還不錯用…
但如果我想要讓內容斷行(line break)? (註:基本上mailto中不會把純文字的line break--->\r\n給放上去,因為依照得用urlencode的方式加上斷行,請看這裡)

所以想要斷行要用encode的「%0D%0A」