[IE] 修正輸入框提示 placeholder 在 focus 時消失 (placeholder disappears on focus)

使用 HTML 的 input 標籤中的提示( placeholder ),當使用者 focus 輸入框時(尚未輸入任何字)

在除了 IE 以外的瀏覽器( chrome、firefox及 edge 等),提示( placeholder )仍會存在。

但在 IE 瀏覽器上則會消失。

如此範例:(請在 IE 及 chrome 分別開啟並 forcus 輸入框則可看見差異)

在微軟的開發者討論區,也可以查到相關的問題,看起來好像不打算修了….。

因此,若希望修正 IE 此行為的話,以下則提供兩種在 IE 實作 placeholder 作法。


首先我們必須判斷瀏覽器是否為IE

  1. 直覺的當使用者 focus 時,先檢查裡面是否有值,若沒有的話自動填入 placeholer 該有的值(並且不能讓使用者編輯 placeholer,自動將游標移至開頭)。
    直接看程式碼比較清楚:
  2. 第一種方法還要做移動游標,我們可以考慮在 input 上面蓋一個文字區塊,如 label。

 

Leave a Reply