2017-01-25

如何消除 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

沒有留言:

張貼留言