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

Question

如何以編程方式從Safari中運行的Javascript代碼生成按鍵事件？ 看起來WebKit使用DOM 3級模型從Javascript創建鍵盤事件，而DOM 3級鍵盤事件模型不支持keypress事件。 還有其他方法可以使用嗎？

我正在尋找盡可能純粹的Safari / WebKit DOM解決方案。 我真的不想修改網頁，我也不想在外部庫上添加依賴項。 我需要激活任何現有的按鍵處理程序，因此無法添加新的處理程序並直接調用它。

看起來WebKit具有在其UIEvent類中定義的keypress事件的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

聽起來像一個非常相似（非瀏覽器特定）的問題已被問及並已回答：

使用jQuery觸發按鍵...並指定按下了哪個鍵

Answer 3

我曾經也有過一樣的問題。 我希望能夠編寫一個測試，當在GUI上按下回車鍵時，行項目（li）被添加到列表中。 那時，我需要“生成”一個按鍵。 嘗試生成事件，模擬事件，模擬事件（jqMock），這是一個非常簡單的解決方案。

我可以使用jsSpec和jQuery代碼繼續BDDing我的代碼。 如果您使用插件來管理按鍵（例如熱鍵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>