如何讓div span等元素能響應鍵盤事件操作指南
更新時間：2012年11月13日 14:59:13 作者：
在我這幾天的工作中遇到了一個問題，我有一個可編輯的div，并且在DIV里面還有一個可編輯的span，我想要讓span能響應鍵盤事，想實現(xiàn)這種效果，應該如何實踐呢
在我這幾天的工作中遇到了一個問題，google了一下找到了解決方案，不過是英文的，我簡單翻譯下讓更多的人能看懂
譯文如下：
我有一個可編輯的div，并且在DIV里面還有一個可編輯的span，我想要讓span能響應鍵盤事件，
這里是測試JS代碼：
$(function()
{
$('#someid').keypress(function(event){alert('test');});
});
這里是測試html代碼：
<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>
如果你在瀏覽器中測試，你會看見，當你在Some TEXT上press key時，沒有‘test'彈出框彈出，我知道這個問題的發(fā)生原因是因為事件是從span的父節(jié)點div發(fā)出來的，所以span沒有觸發(fā)到事件，當然也是因為span沒有焦點造成的，所以我想要誰幫助我找出解決方案。
最終終于有好心人幫助解決了這個問題
關于你的問題的解決方案代碼我已經(jīng)提交到了http://jsfiddle.net/gaby/TwgkC/3/ 并且工作正常
在FF, Opera, Chrome, Safari, IE8 ..中測試
#someid需要獲得焦點才能觸發(fā)keypress，如果你想要你的代碼獲得焦點在元素創(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..
}
追加：
兩個方法來觸發(fā)事件，（事實上需要使用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();});
});
demo html：
<div id="mydiv" contenteditable="true">
editable follows:
</div>
2、讓你的#mydiv處在非編輯狀態(tài)，當你需要觸發(fā)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();});
});
demo html：
<div id="mydiv" contenteditable="true">
editable follows:
</div>
譯文如下：
我有一個可編輯的div，并且在DIV里面還有一個可編輯的span，我想要讓span能響應鍵盤事件，
這里是測試JS代碼：
復制代碼 代碼如下:
$(function()
{
$('#someid').keypress(function(event){alert('test');});
});
這里是測試html代碼：
復制代碼 代碼如下:
<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>
如果你在瀏覽器中測試，你會看見，當你在Some TEXT上press key時，沒有‘test'彈出框彈出，我知道這個問題的發(fā)生原因是因為事件是從span的父節(jié)點div發(fā)出來的，所以span沒有觸發(fā)到事件，當然也是因為span沒有焦點造成的，所以我想要誰幫助我找出解決方案。
最終終于有好心人幫助解決了這個問題
關于你的問題的解決方案代碼我已經(jīng)提交到了http://jsfiddle.net/gaby/TwgkC/3/ 并且工作正常
在FF, Opera, Chrome, Safari, IE8 ..中測試
#someid需要獲得焦點才能觸發(fā)keypress，如果你想要你的代碼獲得焦點在元素創(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..
}
追加：
兩個方法來觸發(fā)事件，（事實上需要使用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();});
});
demo html：
復制代碼 代碼如下:
<div id="mydiv" contenteditable="true">
editable follows:
</div>
2、讓你的#mydiv處在非編輯狀態(tài)，當你需要觸發(fā)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();});
});
demo html：
復制代碼 代碼如下:
<div id="mydiv" contenteditable="true">
editable follows:
</div>
相關文章
這篇文章主要介紹了如何使用ReactHook和Context實現(xiàn)全局主題切換的功能,通過創(chuàng)建一個Context對象和一個ThemeProvider組件,可以將當前主題存儲在Context中,并提供一個切換主題的方法,文中給出了詳細的代碼示例,需要的朋友可以參考下2025-03-03
這篇文章介紹了JavaScript防抖動與節(jié)流處理的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
在JS中判斷瀏覽器的類型，估計是每個編輯過頁面的開發(fā)人員都遇到過的問題2012-10-10
用原生 JS 實現(xiàn) innerHTML 功能實例詳解
這篇文章主要介紹了用原生 JS 實現(xiàn) innerHTML 功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
Bootstrap基本插件學習筆記之Tooltip提示工具(18)
這篇文章主要為大家詳細介紹了Bootstrap基本插件學習筆記之oltip提示工具的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
整理Javascript數(shù)組學習筆記,之前一系列的文章是跟我學習Javascript，本文就是進一步學習javascript數(shù)組，希望大家繼續(xù)關注2015-11-11
這篇文章主要為大家詳細介紹了JS代碼實現(xiàn)頁面切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
一道超經(jīng)典js面試題Foo.getName()的故事
Foo.getName算是一道比較老的面試題了,大致百度了一下在17年就有相關文章在介紹它,下面這篇文章主要給大家介紹了關于一道超經(jīng)典js面試題Foo.getName()的相關資料,需要的朋友可以參考下2022-03-03
JavaScript中“+=”的應用...2007-02-02
這篇文章主要為大家詳細介紹了js canvas實現(xiàn)寫字動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11