在IE10里，雙擊輸入框或者單擊按鈕都彈出文件選擇框。在其他瀏覽器里單擊輸入框，按鈕或文字都可以觸發文件選擇框。
鑒于這種混亂情況，有必要要統一樣式和行為。下面是我的兼容性方案。
先看一下最終結果在各瀏覽器的截圖：

基本思路：創建輸入框和按鈕模擬file上傳控件。將file上傳控件設置成透明。讓file上傳控件與用于模擬的按鈕右對齊。修改元素的堆疊順序，讓按鈕處于下面，file上傳控件在中間，輸入框在上面。在文件選擇完畢后將file上傳控件里的值賦給用于模擬的輸入框。
原理：在不同的瀏覽器里，file上傳控件的按鈕的height都是可調的，而且file上傳控件的右側都是可以單擊的。所以通過調節file上傳控件的height，并調整file上傳控件的位置（右對齊），可以讓file上傳控件的可單擊區域與用于模擬的按鈕完全覆蓋。當file上傳控件透明時用戶單擊用于模擬的按鈕就觸發了文件選擇框。但同時file上傳控件的堆疊順序不能先于用于模擬的輸入框，不然當用戶將鼠標置于所見的輸入框上時可能會看到光標不是指示文本而是為一個箭頭（而且為一個箭頭時單擊會彈出文件選擇框），用戶將感到困惑。
實現：先看看html部分的代碼。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表