Question

我有一个测试网页，如果我点击输入字段中的某个键，则会发出警告：

<!doctype html>
<html>
<head>
  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  <script>
    $( document ).ready( function() {
      $( '#foo' ).keydown( function() { alert( "debug" ); } );
    });
  </script>
</head>
<body>
  <input id='foo' type='type'/>
</body>
</html>

我有这个chrome扩展，修改输入文本并触发keydown事件：

$( document ).ready( function() {
  window.setTimeout( function() {
    $( '#foo' ).val( "foo" );
    $( '#foo' ).keydown();
  }, 2000 );
});

如果我安装扩展，2秒后（如预期的那样）文本被修改 - 但不显示警报，所以我可以建议keydown事件不会从扩展沙箱传递到页面javascript处理程序。是否有可能以某种方式修改我的代码，因此扩展可以模拟页面上的javascript可以看到的keydown？我通过chrome扩展自动化第三方网站，其中一个输入需要keyup来检测价值变化（我正在自动化的页面写得很糟糕 - 但我没有任何控制权，除了它的来源码）。

Answer 1

您的代码无效，因为jQuery的keydown()方法实际上并未触发“真正的”keydown事件。相反，jQuery在jQuery.cache中查找“绑定”事件处理程序，并调用相应的函数。

由于您的内容脚本的jQuery对象与页面的jQuery对象不同，因此调用.keydown()不会导致任何操作。

在您的情况下，我建议在页面中inject your code，以便您的代码在与页面相同的上下文中运行。然后，调用$('#foo').keydown()将使用页面的jQuery对象，并导致预期的行为。

不依赖于任何库的一般解决方案是使用KeyboardEvent构造函数（defined in DOM4）来触发事件：

var event = new KeyboardEvent('keydown');
document.querySelector('#foo').dispatchEvent(event);

chrome扩展：如何将'keydown'事件发送到页面输入？

1 个答案: