如何讓div span等元素能回應鍵盤事件操作指南

如何讓div span等元素能回應鍵盤事件操作指南_javascript技巧

WBOY

發布： 2016-05-16 17:48:15

原創

1185 人瀏覽過

在我這幾天的工作中遇到了一個問題，google了一下找到了解決方案，不過是英文的，我簡單翻譯下讓更多的人能看懂
譯文如下：
我有一個可編輯的div，並且在DIV裡面還有一個可編輯的span，我想要讓span能響應鍵盤事件，
這裡是測試JS代碼：

複製程式碼程式碼如下:

 
$(function() 
{ 
$('#someid'). keypress(function(event){alert('test');}); 
}); 

這裡是測試html程式碼:

複製程式碼程式碼如下:

editable follows>editable follows>editable follows>editable :Some TEXT

如果你在瀏覽器中測試，你會看見，當你在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('Some TExt'); 
//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 .. 
} 

追加：
兩個方法來引發事件，（事實上需要使用contenteditable屬性），不確定你是否能接受這種情況
1、包裹一個可編輯span在另一個的外層，並且設定它的屬性contenteditable="false"
demo js：

複製程式碼

複製程式碼

 程式碼如下:

function AppendSpan() 
{ 
$('#mydiv').append('Some TExt');

//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：

複製代碼

程式碼如下:

editable follows:

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

複製程式碼

複製程式碼

 程式碼如下:

function AppendSpan()
{

$('#mydiv').removeAttr('contenteditable').append('Some TExt'); //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:

複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製碼🎜>

editable follows: