如何讓div span等元素能響應(yīng)鍵盤事件操作指南
2024-05-06 14:20:57
供稿：網(wǎng)友
在我這幾天的工作中遇到了一個(gè)問題，google了一下找到了解決方案，不過是英文的，我簡(jiǎn)單翻譯下讓更多的人能看懂
譯文如下：
我有一個(gè)可編輯的div，并且在DIV里面還有一個(gè)可編輯的span，我想要讓span能響應(yīng)鍵盤事件，
這里是測(cè)試JS代碼：
代碼如下:
$(function()
{
$('#someid').keypress(function(event){alert('test');});
});
這里是測(cè)試html代碼：
代碼如下:
<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>
如果你在瀏覽器中測(cè)試，你會(huì)看見，當(dāng)你在Some TEXT上press key時(shí)，沒有‘test'彈出框彈出，我知道這個(gè)問題的發(fā)生原因是因?yàn)槭录菑膕pan的父節(jié)點(diǎn)div發(fā)出來的，所以span沒有觸發(fā)到事件，當(dāng)然也是因?yàn)閟pan沒有焦點(diǎn)造成的，所以我想要誰幫助我找出解決方案。
最終終于有好心人幫助解決了這個(gè)問題
關(guān)于你的問題的解決方案代碼我已經(jīng)提交到了http://jsfiddle.net/gaby/TwgkC/3/ 并且工作正常
在FF, Opera, Chrome, Safari, IE8 ..中測(cè)試
#someid需要獲得焦點(diǎn)才能觸發(fā)keypress，如果你想要你的代碼獲得焦點(diǎn)在元素創(chuàng)建后立即使用.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..
}
追加：
兩個(gè)方法來觸發(fā)事件，（事實(shí)上需要使用contenteditable屬性），不確定你是否能接受這種情況
1、包裹一個(gè)可編輯span在另一個(gè)的外層，并且設(shè)置它的屬性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();});
});
demo html：
代碼如下:
<div id="mydiv" contenteditable="true">
editable follows:
</div>
2、讓你的#mydiv處在非編輯狀態(tài)，當(dāng)你需要觸發(fā)span的鍵盤事件時(shí)
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();});
});
demo html：
