5

私は a を持ってfile <input> fieldおり、 a<span>は入力フィールドを飾ります:

<span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files
    <input id="filechose_button" type="file" name="fileData" size="1" style="display: none"/>
</span>

これの動作はChromeとSafariで想定されているとおりですが、FireFoxはをクリックすると2 つ 開きます。file input dialogsbutton(span)

なぜそうなるのですか？

ファイル入力フィールドは非表示で、ボタン動作のあるスパンを介してのみアクセスできると思います。

アップデート：

<input>外側に置くと<span>正常に動作します。

 <span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="filechose_button.click()">chose files</span>
 <input id="filechose_button" type="file" name="fileData" size="1" style="display: none"/>

JSFiddle

しかし、なぜそうinside positionしないのですか？

4

5 に答える 5

8

これは、ある種のイベント伝播の混乱が原因です

<span class="span5 btn btn-primary btn-file" id="chose_files_btn" onclick="doOpen(event)">chose files
    <input id="filechose_button" type="file" name="fileData" size="1" style="display: none"/>
</span>

と

function doOpen(event){
    event = event || window.event;
    if(event.target.id != 'filechose_button'){
        filechose_button.click();
    }
}

デモ:フィドル

于 2013-04-30T05:10:59.187 に答える