如何使用 Javascript 在 Safari 中生成按键事件？

Question

如何以编程方式从 Safari 中运行的 Javascript 代码生成按键事件？看起来 WebKit 正在使用 DOM 3 级模型从 Javascript 创建键盘事件，而 DOM 3 级键盘事件模型不支持 keypress 事件。我还有其他方法可以使用吗？

我正在寻找尽可能纯粹的 Safari/WebKit DOM 解决方案。我真的不想修改网页，也不想添加对外部库的依赖。我需要激活任何现有的按键处理程序，因此添加新的处理程序并直接调用它是行不通的。

看起来 WebKit 在其 UIEvent 类中定义了按键事件的 keyCode 和 charCode 属性，但它们是只读的。有没有办法设置这些属性？以下方法不起作用：

var evt = document.createEvent('UIEvents');
evt.initUIEvent('keypress', true, true, window, 0);
evt.keyCode = 114; // 'r'
evt.charCode = 114;
alert("keyCode = " + evt.keyCode + ", charCode = " + evt.charCode); // both 0

在initUIEvent的调用中设置detail属性似乎也没有效果。

Answer 1

使用 TextEvent（由 DOM3 引入）。由于您正在寻找生成按键事件，我猜您正在使用字符。在下面的代码中，textToInsert 是一个字符串，而 textarea 是我将事件分派到的元素。

var eventObject = document.createEvent('TextEvent');
eventObject.initTextEvent('textInput',
                          true,
                          true,
                          null,
                          textToInsert);

textarea.dispatchEvent(eventObject);

这适用于 Safari 3.1.2（随后适用于 Chrome）。

Answer 2

听起来已经有人提出并回答了一个非常相似（非浏览器特定）的问题：

Trigger a keypress with jQuery...and specify which key was pressed

Answer 3

我也遇到了同样的问题。我希望能够编写一个测试，当在 GUI 上按下回车键时，一个行项目（li）被添加到列表中。那时，我需要“生成”一个按键。尝试生成事件、模拟事件、模拟事件 (jqMock)，这是一个非常简单的解决方案。

我可以继续使用 jsSpec 和 jQuery 代码对我的代码进行 BDD。如果您使用插件来管理按键（例如热键 jQuery 插件），这个测试会有点困难

这是我想做的：

describe 'I need to be able to edit items in a list', {

... [setup code and other tests]

'should create a new item if I press enter': function(){
    value_of($('#todo').items().size()).should_be(7)
    // be on the last item in the list
    task = $('#todo').items().filter(':last').focus()
    // press enter
    task.__keypress(13)
    // check that an item was added 
    value_of($('#todo').tasks().size()).should_be(8)
    },
}

这是绑定处理程序的代码。请注意，使用此解决方案，我拦截了事件并仅通过 which 代码 - 这允许我传入测试中的值。这就是我目前所需要的。显然，如果我想拦截更多，我需要扩展传入的内容（例如，请参阅 jquery.hotkeys 插件）：

$().items().bind('keypress', function(event){$().__keypress(event.which)})

这是处理程序：

  __keypress: function(which){
      switch(which)
      {
        ...

        case 13:  // enter
          [my code that creates a new item]        
          break;
        default:
      }       
  },

ps：如果有人能够模拟 window.event，请告诉我。我在使用 jqMock 时运气不佳。

Answer 4

http://docs.jquery.com/Events/keypress#fn

换句话说，您将按键事件附加到某个元素。使用 ID 为“someid”的元素，例如：

<script language="text/javascript" src="jquery.js"></script>
<script language="text/javascript">
$(function() {
    // add a keypress handler
    $("#someid").keypress(function(e){
        alert('you just pressed ' + e.which);
    });
    // imitate the keypress
    $("#someid").keypress();
});
</script>