Question

我使用Chrome扩展程序修改input元素，方法是添加一个在文字超过30个字符时触发警报的功能：

inputElement.onkeyup = function () { ... some code here ... };

在对应用程序进行UI更新之前，这可以按预期工作。现在它已经坏了。新的用户界面已经表面上发生了变化，我认为这反映了新的CSS。我可以改变inputElement的默认值，所以我知道我仍然正确地击中了元素。新的CSS或应用程序自己的jQuery可能阻止我的功能工作吗？如果有，是否有解决方案？

更新：澄清一下。我的问题不是，＆＃34;为什么以下代码不起作用？它可以将onkeyup注入到当前没有此属性的输入表单中，而这些表单会被Web应用程序的某些其他功能（例如CSS或jQuery）破坏吗？＆＃34;我有，Maximillian Laumeister建议，尝试addEventListener方法，这是有效的。虽然，这是万无一失的吗？有一个万无一失的解决方案吗？或者是对应用程序的每次更新进行更多测试并重新评估？

Answer 1

要注入onkeyup函数而不影响已存在的任何onkeyup函数，您应该使用事件监听器。

如果现有onkeyup功能或事件监听器，请使用addEventListener购买，我们只是添加其中的内容，因此不会干扰现有功能。

如果没有现有的onkeyup函数，那么它也会起作用 - 因为使用addEventListener我们没有触及任何可能已经存在或可能不存在的函数赋值或事件侦听器。

以下是如何在代码中添加事件监听器（现场演示）：

＆＃13;

document.getElementById("theinput").addEventListener("keyup", function() {
  if (this.value.length > 30) alert("Greater than 30 chars");
  document.getElementById("output").textContent = this.value.length;
});

＆＃13;

<div>Type in the box to see character count</div>
<input id="theinput" />
<div id="output"></div>

＆＃13;

CSS或jQuery可以覆盖注入onkeyup属性吗？

1 个答案: