如何賦予隱藏的輸入和自定義標籤的相同行爲

如何賦予style =「display：none;」的文件類型輸入按鈕的相同行爲自定義標籤？即，即使輸入被隱藏，標籤和輸入也可以具有相同的動作。下面我的html代碼：如何賦予隱藏的輸入和自定義標籤的相同行爲

<label for="model1" class="uploadFile">File...</label> 
<input id="model1" type="file" name="model1" class="model1" style="display:none;" required="true" />

來源

2017-07-26 John

這是很容易使用jQuery：

$('#model1Label').on('click', function(){ 
 
    $('#model1').triggerHandler('click'); 
 
    
 
    //seems not to work consistently on chrome (only for file inputs?) 
 
    //$('#model1').trigger('click'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label id="model1Label" for="model1" class="uploadFile">File...</label> 
 
<input id="model1" type="file" name="model1" class="model1" style="display:none;" required="true" />

編輯：由SKSpall的建議，修改了觸發功能的怪異行爲上的最少鉻

來源

2017-07-26 14:03:27 Kaddath

單擊取消/打開後文件對話框出現兩次即如果我單擊取消一次，它會出現再次，當我再次點擊取消，它消失。使用triggerHandler方法很好，因爲.triggerHandler（）不會導致事件的默認行爲發生。 $（ '＃MODEL1'）triggerHandler（ '點擊'）。應該工作完美。 – SKSpall

@SKSpall thx，虐待更新答案，它在firefox中的工作方式非常好，但是一些間諜軟件如chrome可能會表現得異常：D – Kaddath

是的，我在Chrome中進行了測試。：P除了Chrome，這在FF和IE中運行良好。 triggerHandler在所有三項中都能正常工作。 – SKSpall

如何賦予隱藏的輸入和自定義標籤的相同行爲

回答

相關問題