如何消除 IE 中 input 元件上的游標

之前為了解決 HTML 檔案上傳元件在各個瀏覽器呈現效果不同的問題，所以手刻了上傳元件，詳細內容請參考 試著將不同瀏覽器的上傳元件(input type=‘file’)樣式統一, 功能面沒問題，但公司認真的 QA 發現在 IE 上出現畫面不一致的狀況，所以我又來了手工調整了 ~~

畫面問題

  • 實際效果請參考 原始 jsbin

  • Select 出現輸入位置提示用的 | 游標

    IEcursor

解決方式

  • 直接在 input 加上 onfocus="this.blur()"

    • 原始 input

      <input id='file' type="file" name="file" class="x-form-text x-form-field inputtext {required:true}" size="40"/>

    • 修改後 input

      <input id='file' type="file" name="file" onfocus="this.blur()" class="x-form-text x-form-field inputtext {required:true}" size="40"/>

  • 實際效果請參考 修改後 jsbin

參考資料

  1. html - Hide textfield blinking cursor - Stack Overflow
  2. 試著將不同瀏覽器的上傳元件(input type=‘file’)樣式統一