Question

<a href="javascript:void(0)" id="select-handler">select</a>
<input type="file" id="real-file-input" style="display:none" />

$('#select-handler').click(function(){
    $('#real-file-input').click(); 
});

$('#real-file-input').bind('propertychange', function(){
    alert('changed');
});

奇怪的是，当我使用.click()时，propertychange将不会被解雇。

Answer 1

实际上你的代码在 IE7和8 中运行正常，每当我更改input type ='file'的值时，警报就会被触发。但它不适用于＆gt; IE9 版本。

来自paulbakaus's blog on propertychange on Internet Explorer 9

IE9上propertychange出了什么问题？



IE9在绑定它们时不会触发非标准事件   的addEventListener。每个使用功能的现代JS库   检测，包括jQuery，将失败（另见：   http://bugs.jquery.com/ticket/8485）。 “不是一个大问题”，你说，“简单地说   直接使用attachEvent“你说？



好消息：使用attachEvent时会触发propertychange。坏的   新闻：在修改任何CSS属性时拒绝触发   发动机不知道的元素。“这很糟糕，”你说，   “但我知道你可以在IE9上使用DOMAttrModified！”你说？



DOMAttrModified具有完全相同的行为。它不会开火   对于未知的CSS属性。这是一场彻底的灾难。

许多开发人员面临着同样奇怪的行为。

为什么要使用Internet Explorer仅支持的onpropertychange？

我宁愿转到 change 事件处理程序

$('#real-file-input').bind('change', function(){
    alert('changed');
});

或者如果是 HTML5 ，那么 input 事件处理程序。

$('#real-file-input').bind('input', function(){
    alert('changed');
});

Answer 2

不幸的是，IE9并不支持＆＃34;输入属性更改＆＃34;删除事件。使用＆＃34; keyup＆＃34;可以轻松捕获转义，删除和退格。 event.which事件，但选择文本并通过右键单击删除 - ＆gt; delete不会触发事件propertychange，change，select或keyup / keydown。

到目前为止，我找不到解决此问题的方法。

这是我的代码：

$('#search_input').on("propertychange input", function(event){
  console.log('propertychange event');
  // trigger search
});
$('#search_input').on("keyup", function(event){
  console.log('keyup event', event.which);
  if(event.which === 27) { // on ESC empty value and clear search
    $(this).val('');
    // trigger search
  } else if(event.which === 8 || event.which === 46) { // trigger search on Backspace
    // trigger search
  }
});
$('#search_input').on("change input", function(event){
  console.log('change event');
  // trigger search
});
$('#search_input').on("select input", function(event){
  console.log('select event');
  // trigger search
});

IE onpropertychange事件不会触发

2 个答案: