javascript - 在输入字段上委托(delegate)更改事件

Question

每当输入字段的值发生变化时，我都会尝试触发一个函数。输入字段位于灯箱中，因此我必须委托(delegate)该事件:

var validateDonation = function(elem) {
  var msg,
      value = elem.value;

  if (value == '') { msg = 'Please enter an amount'; }
  else if(parseInt(value, 10) < 1) { msg = 'Please enter an amount greater than 1'; }
  else if(parseInt(value, 10) > 100) { msg = 'Please enter an amount less than 100'; }
  else { msg = ''; }


  if(msg != '') {
    console.log(msg);
  }
}

和

$('body').delegate('#donation_amount', 'change', function(event) {
  validateDonation(this);
});

如果我使用 keyup 而不是 change 控制台日志工作得很好。但不是改变。为什么？

Answer 1

https://msdn.microsoft.com/en-us/library/ms536912(v=vs.85).aspx

onchange:此事件在提交内容时触发，而不是在值更改时触发。例如，在文本框中，当用户键入时不会触发此事件，而是当用户通过离开具有焦点的文本框来提交更改时触发。另外，当控件也失去焦点时，该事件会在 onblur 指定的代码之前执行。

如果您希望更改立即更新，那么您需要使用 oninput 事件

oninput:当 <input> 的值时同步触发 DOM 输入事件或<textarea>元素被改变。此外，当其内容发生更改时，它会在可内容编辑的编辑器上触发。

对于 IE9 以下的 IE，我相信您需要使用 onpropertychange 事件以及 oninput 来适应现代浏览器。

这是一个 fiddle ，向您展示事件立即触发

http://jsfiddle.net/SeanWessell/9jfkcapp/

试试这个...

$('body').delegate('#donation_amount', 'input propertychange', function (event) {
    validateDonation(this);
});