[問題解法紀錄] 網頁英文驗證碼實作

問題解法紀錄 · 02-02 · 125 人瀏覽過

  因為在做專案需要用到類似驗證碼的東西,雖然只是輸入四個英文字母,卻在前端這塊卡關了...

問題

  我希望使用者在點到輸入框的時候可以切換成英文輸入法(因為是四個英文字母),而不是把英文以外的字都替換成空字串。大概是像下面這樣:

可以觀察到如果不是英文輸入法會很不方便,所以我想找方法,如果可以點上去就自動換成英文輸入法呢?

解決方法

  原本以為可以有些 API 可以用,但很不幸的,唯一可以用的 ime-mode 只有 IE 跟火狐支援,所以這不是好方法。

  所以要做到自動切輸入法要利用 input type=password 的特性

  可以發現在 password 中,我們的輸入法被鎖定在英文。如果我們點擊輸入框時,將 focuse 定在 password 上,更改完輸入法,在回到原本的輸入框上,就可以做到自動改輸入法了。

不過這個也不是完美個方案,經過測試在某些瀏覽器的無痕模式下,離開 password 就會回到原本的輸入法了。如果想要鎖定輸入法就要做虛擬的輸入框了。

參考來源

解决chrome系浏览器ime-mode问题

前端
Theme Jasmine by Kent Liao