讓div span等元素能響應鍵盤事件

在我這幾天的工作中遇到了一個問題，google了一下找到了解決方案，不過是英文的，我簡單翻譯下讓更多的人能看懂

譯文如下：

我有一個可編輯的div，並且在DIV里面還有一個可編輯的span，我想要讓span能響應鍵盤事件，

這里是測試JS代碼：

$(function()
{
    $('#someid').keypress(function(event){alert('test');});
});//出自http://www.cnblogs.com/ahjesus 尊重作者辛苦勞動成果，轉載請注明出處，謝謝！

這里是測試html代碼：

<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>

如果你在瀏覽器中測試，你會看見，當你在Some TEXT上press key時，沒有‘test’彈出框彈出，我知道這個問題的發生原因是因為事件是從span的父節點div發出來的，所以span沒有觸發到事件，當然也是因為span沒有焦點造成的，所以我想要誰幫助我找出解決方案。

最終終於有好心人幫助解決了這個問題

關於你的問題的解決方案代碼我已經提交到了http://jsfiddle.net/gaby/TwgkC/3/ 並且工作正常

在FF, Opera, Chrome, Safari, IE8 ..中測試

#someid需要獲得焦點才能觸發keypress，如果你想要你的代碼獲得焦點在元素創建后立即使用.focus()方法

function AppendSpan()
{
    $('#mydiv').append('<span id="someid" contenteditable="true">Some TExt</span>');
    //Then I want to handle the keypress event on the inserted span
    $('#someid').keypress(function(event){
          //do something here
          alert(this.id);
    }).focus();// bring focus to the element once you append it..
}//出自http://www.cnblogs.com/ahjesus 尊重作者辛苦勞動成果，轉載請注明出處，謝謝！

追加：
兩個方法來觸發事件，（事實上需要使用contenteditable屬性），不確定你是否能接受這種情況

1、包裹一個可編輯span在另一個的外層，並且設置它的屬性contenteditable="false"

demo js：

function AppendSpan()
{
    $('#mydiv').append('<span contenteditable="false"><span id="someid" contenteditable="true">Some TExt</span></span>');
    //Then I want to handle the keypress event on the inserted span
    $('#someid').keypress(function(event){alert('test');});
}
$(function()
{
    $('#mydiv').keypress(function(event){AppendSpan();});
});//出自http://www.cnblogs.com/ahjesus 尊重作者辛苦勞動成果，轉載請注明出處，謝謝！

demo html：

<div id="mydiv" contenteditable="true">
editable follows:
</div>

 

2、讓你的#mydiv處在非編輯狀態，當你需要觸發span的鍵盤事件時

demo js：

function AppendSpan()
{
    $('#mydiv').removeAttr('contenteditable').append('<span id="someid" contenteditable="true">Some TExt</span>');
    //Then I want to handle the keypress event on the inserted span
    $('#someid').keypress(function(event){alert('test');});
}
$(function()
{
    $('#mydiv').keypress(function(event){AppendSpan();});
});//出自http://www.cnblogs.com/ahjesus 尊重作者辛苦勞動成果，轉載請注明出處，謝謝！

demo html：

<div id="mydiv" contenteditable="true">
editable follows:
</div>