亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2012年11月13日 14:59:13   作者:  
在我這幾天的工作中遇到了一個問題,我有一個可編輯的div,并且在DIV里面還有一個可編輯的span,我想要讓span能響應鍵盤事,想實現這種效果,應該如何實踐呢
在我這幾天的工作中遇到了一個問題,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沒有焦點造成的,所以我想要誰幫助我找出解決方案。
最終終于有好心人幫助解決了這個問題
關于你的問題的解決方案代碼我已經提交到了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>

相關文章

  • javascript支持IE和firefox(FF)的漸變透明效果

    javascript支持IE和firefox(FF)的漸變透明效果

    DataThis可以發(fā)送任何標簽,這個標簽沒有ID也可以,因為用的是自定義屬性。
    2008-10-10
  • js for終止循環(huán) 跳出多層循環(huán)

    js for終止循環(huán) 跳出多層循環(huán)

    這篇文章主要介紹了js for等循環(huán) 跳出多層循環(huán),終止循環(huán)執(zhí)行的方法,需要的朋友可以參考下
    2018-10-10
  • 談談js中的prototype及prototype屬性解釋和常用方法

    談談js中的prototype及prototype屬性解釋和常用方法

    prototype是javascript中筆記難理解的一部分內容,下面通過幾個關鍵知識點給大家講解js中的prototype,對js中的prototype相關知識感興趣的朋友一起學習吧
    2015-11-11
  • javascript 繪制矩形框

    javascript 繪制矩形框

    今天讀John Resig的Pro Javascript Techniques時候看到他書上給的一個關于drag and drop的例子,我做的第二件事就是js模擬用鼠標拖出矩形框,代碼很簡單
    2009-04-04
  • 如何用JS有效的壓縮圖片

    如何用JS有效的壓縮圖片

    JavaScript操作壓縮圖片原理不難,已有成熟 API,然而在實際輸出壓縮后結果卻總有意外,有些圖片竟會越壓縮越大,加之終端(手機)類型眾多,有些手機壓縮圖片甚至變黑。本文將一步一步解決此類問題
    2021-05-05
  • js+html+css實現鼠標移動div實例

    js+html+css實現鼠標移動div實例

    移動div對于很多的網有們來說是一件很熟悉的事了,本文老生長談,用js實現鼠標移動div,希望大伙們可以舉一反三,感興趣的朋友可以參考下,或許本文對你有所幫助
    2013-01-01
  • 微信小程序實現頂部選項卡(swiper)

    微信小程序實現頂部選項卡(swiper)

    這篇文章主要為大家詳細介紹了微信小程序實現頂部選項卡效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • javascript 制作坦克大戰(zhàn)游戲初步 圖片與代碼

    javascript 制作坦克大戰(zhàn)游戲初步 圖片與代碼

    javascript 制作坦克大戰(zhàn)游戲初步 圖片與代碼...
    2007-11-11
  • layui radio性別單選框賦值方法

    layui radio性別單選框賦值方法

    今天小編就為大家分享一篇layui radio性別單選框賦值方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • 微信小程序云開發(fā)實現增刪改查功能

    微信小程序云開發(fā)實現增刪改查功能

    這篇文章主要為大家詳細介紹了微信小程序云開發(fā)實現增刪改查功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-05-05

最新評論