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

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

發(fā)表評(píng)論 共有條評(píng)論 用戶名: 密碼: 驗(yàn)證碼: 匿名發(fā)表