Skip to content

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

Published: at 12:51 PM (2 min read)

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

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

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

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

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

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


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

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

Previous Post
[javascript] 利用瀏覽器特性判斷瀏覽器類別
Next Post
[linux] find 指令,搜尋檔案資料夾名稱與全文搜尋