Question

当我们点击BACKSPACE / DEL / do CUT时，我们用什么最干净的解决方案来克服IE9不会触发输入事件的问题？

最干净的我的意思是代码发臭没有。

Answer 1

我为退格/删除/剪切开发了IE9 polyfill。

(function (d) {
  if (navigator.userAgent.indexOf('MSIE 9') === -1) return;

  d.addEventListener('selectionchange', function() {
    var el = d.activeElement;

    if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.type === 'text')) {
      var ev = d.createEvent('CustomEvent');
      ev.initCustomEvent('input', true, true, {});
      el.dispatchEvent(ev);
    }
  });
})(document);

出于某种原因，在IE9中，当您在文本字段内删除时，会触发selectionchange事件。

因此，您唯一需要做的是：检查选择的活动元素是否为输入，然后我告诉元素调度input事件，就像它应该做的那样。

将代码放在页面的任何位置，所有删除操作现在都会触发input事件！

Answer 2

我遇到了同样的问题。 oninput事件在Chrome和FF中触发backspace，del等，但不触发IE9。

但是，OnKeyUp确实在IE9中触发了backspace，del等，而不是Chrome FF，所以相反。

我添加了一个名为ieOverrides.js的特定IE javascript文件：

<!--[if IE 9]>
    <script type="text/javascript" src="js/ui/ieOverrides.js"></script>
<![endif]-->

然后在js文件中我切换了事件处理程序：

$(document).ready(function(){
    $("#search").off('input');
    $("#search").on('keyup', function(){
        search(this.value);
    });
});

希望有所帮助。

Answer 3

当使用退格键，删除键，剪切命令或上下文菜单中的删除命令从文本字段中删除字符时，IE9不会触发oninput事件。您可以通过跟踪onkeyup来解决退格/删除密钥问题。您还可以通过跟踪切入来解决切割命令问题。但我发现解决context delete命令的唯一方法是使用onselectionchange事件。幸运的是，如果你使用onselectionchange，你将不必跟踪oncut或onkeyup。

以下是基于此技术的一些示例代码I've written about：

<input id="myInput" type="text">

<script>
  // Get the input and remember its last value:
  var myInput = document.getElementById("myInput"), 
      lastValue = myInput.value;

  // An oninput function to call:
  var onInput = function() {
    if (lastValue !== myInput.value) { // selectionchange fires more often than needed
      lastValue = myInput.value;
      console.log("New value: " + lastValue);
    }
  };

  // Called by focus/blur events:
  var onFocusChange = function(event) {
    if (event.type === "focus") {
      document.addEventListener("selectionchange", onInput, false);
    } else {
      document.removeEventListener("selectionchange", onInput, false);
    }
  };

  // Add events to listen for input in IE9:
  myInput.addEventListener("input", onInput, false);
  myInput.addEventListener("focus", onFocusChange, false);
  myInput.addEventListener("blur", onFocusChange, false);
</script>

Answer 4

您可以尝试html5Forms（以前的html5小部件）

因为我讨厌COBOL，所以我决定   将我的html5Widgets库更新为：


为不支持它的浏览器添加oninput支持（例如   IE7和8）

当退格键和删除键为时，强制IE9触发表单的oninput   在任何输入节点内按下。

在任何输入节点上触发cut事件时，强制IE9触发表单的oninput。

here是添加此支持的提交的链接

当我们点击BACKSPACE / DEL / do CUT时，IE9中的oninput不会触发

4 个答案: