最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

如何讓divspan等元素能響應(yīng)鍵盤事件操作指南_javascript技巧

來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 21:05:27
文檔

如何讓divspan等元素能響應(yīng)鍵盤事件操作指南_javascript技巧

如何讓divspan等元素能響應(yīng)鍵盤事件操作指南_javascript技巧:在我這幾天的工作中遇到了一個問題,google了一下找到了解決方案,不過是英文的,我簡單翻譯下讓更多的人能看懂 譯文如下: 我有一個可編輯的div,并且在DIV里面還有一個可編輯的span,我想要讓span能響應(yīng)鍵盤事件, 這里是測試JS代碼: 代碼如下: $(
推薦度:
導(dǎo)讀如何讓divspan等元素能響應(yīng)鍵盤事件操作指南_javascript技巧:在我這幾天的工作中遇到了一個問題,google了一下找到了解決方案,不過是英文的,我簡單翻譯下讓更多的人能看懂 譯文如下: 我有一個可編輯的div,并且在DIV里面還有一個可編輯的span,我想要讓span能響應(yīng)鍵盤事件, 這里是測試JS代碼: 代碼如下: $(

在我這幾天的工作中遇到了一個問題,google了一下找到了解決方案,不過是英文的,我簡單翻譯下讓更多的人能看懂
譯文如下:
我有一個可編輯的div,并且在DIV里面還有一個可編輯的span,我想要讓span能響應(yīng)鍵盤事件,
這里是測試JS代碼:
代碼如下:
$(function()
{
$('#someid').keypress(function(event){alert('test');});
});

這里是測試html代碼:
代碼如下:

editable follows:Some TEXT


如果你在瀏覽器中測試,你會看見,當(dāng)你在Some TEXT上press key時,沒有‘test'彈出框彈出,我知道這個問題的發(fā)生原因是因為事件是從span的父節(jié)點div發(fā)出來的,所以span沒有觸發(fā)到事件,當(dāng)然也是因為span沒有焦點造成的,所以我想要誰幫助我找出解決方案。
最終終于有好心人幫助解決了這個問題
關(guān)于你的問題的解決方案代碼我已經(jīng)提交到了http://jsfiddle.net/gaby/TwgkC/3/ 并且工作正常
在FF, Opera, Chrome, Safari, IE8 ..中測試
#someid需要獲得焦點才能觸發(fā)keypress,如果你想要你的代碼獲得焦點在元素創(chuàng)建后立即使用.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..
}

追加:
兩個方法來觸發(fā)事件,(事實上需要使用contenteditable屬性),不確定你是否能接受這種情況
1、包裹一個可編輯span在另一個的外層,并且設(shè)置它的屬性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處在非編輯狀態(tài),當(dāng)你需要觸發(fā)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:

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

如何讓divspan等元素能響應(yīng)鍵盤事件操作指南_javascript技巧

如何讓divspan等元素能響應(yīng)鍵盤事件操作指南_javascript技巧:在我這幾天的工作中遇到了一個問題,google了一下找到了解決方案,不過是英文的,我簡單翻譯下讓更多的人能看懂 譯文如下: 我有一個可編輯的div,并且在DIV里面還有一個可編輯的span,我想要讓span能響應(yīng)鍵盤事件, 這里是測試JS代碼: 代碼如下: $(
推薦度:
標(biāo)簽: sp div span
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top