Javascript IE9中的oninput不'；当我们点击BACKSPACE/DEL/do CUT时，不要开火

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

我所说的最干净是指代码不臭。

你可以试试（以前的html5widgets）

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

为不支持oninput的浏览器添加对oninput的支持（例如。 IE7和IE8）

当backspace键和delete键处于禁用状态时，强制IE9触发窗体的oninput 在任何输入节点内按下

强制IE9在任何输入节点上触发cut事件时触发窗体的oninput

---

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

我也遇到了同样的问题。oninput事件在Chrome和FF中触发退格、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]-->

---

希望有帮助。

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

下面是一些基于此技术的示例代码：

//获取输入并记住其最后一个值：
var myInput=document.getElementById（“myInput”），
lastValue=myInput.value；
//要调用的oninput函数：
var onInput=function（）{
如果（lastValue！==myInput.value）{//selectionchange激发的频率高于需要的频率
lastValue=myInput.value；
log（“新值：+lastValue”）；
}
};
//由焦点/模糊事件调用：
var onFocusChange=函数（事件）{
如果（event.type==“焦点”）{
文档。添加了EventListener（“selectionchange”，onInput，false）；
}否则{
document.removeEventListener（“selectionchange”，onInput，false）；
}
};
//添加事件以侦听IE9中的输入：
myInput.addEventListener（“输入”，onInput，false）；
myInput.addEventListener（“焦点”，onFocusChange，false）；
myInput.addEventListener（“模糊”，onFocusChange，false）；

我为退格/删除/剪切开发了一个

(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

事件

---

将代码放在页面中的任何位置，所有删除操作现在都将触发

输入

事件

不开火什么？关键事件？这可能是为了阻止人们破坏背部功能。您不使用textarea或contentEditable有什么原因吗？@spliff不会触发oninput事件。。正如在标题中一样，它取决于当输入事件触发时您实际想要做什么。例如，输入/文本区域的值是否已经更新了？我是说，是的，我读过那篇博文，但他是如何实现步骤2和步骤3的？他是否设置了onkeypress事件处理程序，检查keycode是否是backspace和oncut事件处理程序？然而，即使浏览器不是IE（因为我们不想在浏览器本身已经支持这一功能的情况下搞砸了）@Name，如果你不想使用整个HTML5小部件，为什么不看看github上的存储库，看看它是如何实现的呢？@Name，我添加了一个链接到我的answer@Name：这不是一个很好的解决方法：它使用

keyup

事件，这意味着您不会为自动重新创建的delete keypress获取单独的

input

事件。@DanielXMoore，项目已重命名。我已经更新了linkNice，但是IE9的selectionchange在按backspace键时没有启动。就像我会打字，然后删除一个字符，添加一个字符，再次删除。最后一次删除不会触发事件。我想Github上最新版本的polyfill（我在这里更新了答案）现在可以工作了。请你试一试，好吗，@tfE？在IE9虚拟机上测试。当我键入然后删除一个字符时，添加一个字符，然后再次删除。最后一次删除未被捕获。据我所知，这不是polyfill，而是IE9“selectionchange”事件的行为。@tfE谢谢！我做了另一个改变并在IE9上测试了这个行为，它似乎工作得很好：）

<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>

(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);