2008年10月17日 星期五

HTML中禁止自動完成和禁用輸入法

IE提供了一個自動完成功能可以記憶我們的輸入內容(如登錄帳號等),方便下一次快速地錄入類似資料.這確實是一個非常友好的功能, 在操作時只需用鼠標雙擊文本框或輸入前幾個字符, 系統會自動列出以前的錄入歷史供你選擇, 大大提高錄入速度及準確性. 相信大多數IE的用戶都啟用了這項功能.
然而做為網站開發者來說, 並不希望什麼資料都記憶在用戶的電腦上(如銀行帳號和其它重要的帳號及密碼), 但是我們又不能要求用戶禁用自動完成的功能. 幸好IE5.0後為INPUT type=password, INPUT type=text, FORM 等控件加入了一個AUTOCOMPLETE的屬性,要禁止控件自動完成功能,只需把AUTOCOMPLETE設為 on 或 off 以外的文字即可,如:
整個表單禁止自動完成
FORM method=post action="submit.asp" AUTOCOMPLETE="..."
禁止文本框自動完成
input type="text" name="creditcard" maxlength="16" AUTOCOMPLETE="..."
在腳本中禁止自動完成
document.querySelectorAll('input').forEach(el => el.setAttribute("autocomplete", "..."));

另外,如果要禁止文本框使用輸入法,可以把在它的樣式中添加ime-mode : disabled 即可,但是這樣並不能禁止輸入漢字,因為用戶還是可以通過複製粘貼輸入漢字的.如:
input type=text style="ime-mode: disabled ; "
※chrome 不支援此用法,改為 type="tel" 可以達到相同效果

沒有留言:

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器