如何赋予隐藏的输入和自定义标签的相同行为

如何赋予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

如何赋予隐藏的输入和自定义标签的相同行为

回答

相关问题