调用输入的点击事件在Safari中不起作用 [英] calling click event of input doesn't work in Safari

问题描述

我有一个输入，文件类型，其中 display：none ，并且有一个按钮。点击按钮后
，输入的事件应该被触发。在IE浏览器中，Chrome浏览器和火狐浏览器都可以使用，但不能在Safari浏览器中使用！

  var elem = $（'< input id =ajxAttachFiles name =fileUploadtype =filestyle =display：none;/>'）; 
 if（$（＃ajxAttachFiles）。length == 0）{
 elem.prependTo（。ChProgress）; 
} 
 $（＃ajxAttachFiles）。click（）; 
  

控制台中没有错误。我尝试了此，但没有任何结果。

  $（document）.ready（function（）{$（＃btn）。on（'click'，function（）{ $（＃ajxAttachFiles）[0] .click（）;}）;}）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js>< / script>< input id =ajxAttachFilestype =filestyle =display：none;>< button id =btntype =button> Click me！< / button>  




解决方案

彻底解决了。该点是输入的元素[type = file] 不能是 display：none 。请看下面的示例



function click（el）{//模拟单击元素。 var evt = document.createEvent（'Event'）; evt.initEvent（'click'，true，true）;添加一个文本文件，并将其添加到文件中，然后将文件添加到文件中。 /使用自定义事件模拟点击fileInput.click（）; //或者使用文件输入的本地click（）}，false）;

< pre class =snippet-code-html lang-html prettyprint-override> < input id =inputFiletype =filename =filestyle =visibilty：hidden; width： 0; height：0>< button id =selectFile>选择< / button>

b $ b

I have a input, type of file, with display:none and there is a button. after clicking the button, the input's event should be fired. In IE, Chrome and Firefox it works but not in Safari!

var elem=$('<input id="ajxAttachFiles" name="fileUpload" type="file" style="display: none;"/>');
    if($("#ajxAttachFiles").length==0){
        elem.prependTo(".ChProgress");
    }
$("#ajxAttachFiles").click();

there is no error in console. I tried this but nothing.

$(document).ready(function(){
        $("#btn").on('click',function(){
          $("#ajxAttachFiles")[0].click();
        });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input id="ajxAttachFiles" type="file" style="display:none;">
<button id="btn" type="button">Click me!</button>


   

解决方案

The issue is completely solved. the point is element of input[type=file] must not be display:none. look at sample below

function click(el) {
  // Simulate click on the element.
  var evt = document.createEvent('Event');
  evt.initEvent('click', true, true);
  el.dispatchEvent(evt);
}

document.querySelector('#selectFile').addEventListener('click', function(e) {
  var fileInput = document.querySelector('#inputFile');
  //click(fileInput); // Simulate the click with a custom event.
  fileInput.click(); // Or, use the native click() of the file input.
}, false);

<input id="inputFile" type="file" name="file" style="visibilty:hidden;width:0;height:0">
<button id="selectFile">Select</button>

这篇关于调用输入的点击事件在Safari中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！