如何讓div span等元素能響應(yīng)鍵盤事件操作指南
更新時(shí)間：2012年11月13日 14:59:13 作者：
在我這幾天的工作中遇到了一個(gè)問題，我有一個(gè)可編輯的div，并且在DIV里面還有一個(gè)可編輯的span，我想要讓span能響應(yīng)鍵盤事，想實(shí)現(xiàn)這種效果，應(yīng)該如何實(shí)踐呢
在我這幾天的工作中遇到了一個(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：
<div id="mydiv" contenteditable="true">
editable follows:
</div>
譯文如下：
我有一個(gè)可編輯的div，并且在DIV里面還有一個(gè)可編輯的span，我想要讓span能響應(yīng)鍵盤事件，
這里是測(cè)試JS代碼：
復(fù)制代碼 代碼如下:
$(function()
{
$('#someid').keypress(function(event){alert('test');});
});
這里是測(cè)試html代碼：
復(fù)制代碼 代碼如下:
<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()方法
復(fù)制代碼 代碼如下:
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：
復(fù)制代碼 代碼如下:
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：
復(fù)制代碼 代碼如下:
<div id="mydiv" contenteditable="true">
editable follows:
</div>
2、讓你的#mydiv處在非編輯狀態(tài)，當(dāng)你需要觸發(fā)span的鍵盤事件時(shí)
demo js：
復(fù)制代碼 代碼如下:
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：
復(fù)制代碼 代碼如下:
<div id="mydiv" contenteditable="true">
editable follows:
</div>
相關(guān)文章
javascript支持IE和firefox(FF)的漸變透明效果
DataThis可以發(fā)送任何標(biāo)簽，這個(gè)標(biāo)簽沒有ID也可以，因?yàn)橛玫氖亲远x屬性。2008-10-10
這篇文章主要介紹了js for等循環(huán) 跳出多層循環(huán)，終止循環(huán)執(zhí)行的方法,需要的朋友可以參考下2018-10-10
談?wù)刯s中的prototype及prototype屬性解釋和常用方法
prototype是javascript中筆記難理解的一部分內(nèi)容，下面通過幾個(gè)關(guān)鍵知識(shí)點(diǎn)給大家講解js中的prototype，對(duì)js中的prototype相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-11
今天讀John Resig的Pro Javascript Techniques時(shí)候看到他書上給的一個(gè)關(guān)于drag and drop的例子，我做的第二件事就是js模擬用鼠標(biāo)拖出矩形框，代碼很簡(jiǎn)單2009-04-04
JavaScript操作壓縮圖片原理不難，已有成熟 API，然而在實(shí)際輸出壓縮后結(jié)果卻總有意外，有些圖片竟會(huì)越壓縮越大，加之終端（手機(jī)）類型眾多，有些手機(jī)壓縮圖片甚至變黑。本文將一步一步解決此類問題2021-05-05
js+html+css實(shí)現(xiàn)鼠標(biāo)移動(dòng)div實(shí)例
移動(dòng)div對(duì)于很多的網(wǎng)有們來說是一件很熟悉的事了，本文老生長(zhǎng)談，用js實(shí)現(xiàn)鼠標(biāo)移動(dòng)div，希望大伙們可以舉一反三，感興趣的朋友可以參考下，或許本文對(duì)你有所幫助2013-01-01
微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡(swiper)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
javascript 制作坦克大戰(zhàn)游戲初步 圖片與代碼
javascript 制作坦克大戰(zhàn)游戲初步 圖片與代碼...2007-11-11
今天小編就為大家分享一篇layui radio性別單選框賦值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
微信小程序云開發(fā)實(shí)現(xiàn)增刪改查功能
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)實(shí)現(xiàn)增刪改查功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05