如何让div 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'弹出框弹出，我知道这个问题的发生原因是因为事件是从span的父节点div发出来的，所以span没有触发到事件，当然也是因为span没有焦点造成的，所以我想要谁帮助我找出解决方案。最终终于有好心人帮助解决了这个问题关于你的问题的解决方案代码我已经提交到了http://jsfiddle.net/gaby/TwgkC/3/ 并且工作正常在FF, Opera, Chrome, Safari, IE8 ..中测试 #someid需要获得焦点才能触发keypress，如果你想要你的代码获得焦点在元素创建后立即使用.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.. } 追加：两个方法来触发事件，（事实上需要使用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处在非编辑状态，当你需要触发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 图片裁剪技巧解读

学php gd库看到有图片裁剪正好整一个嗯其实挺简单的 php版复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; c>>>详细阅读

本文标题：如何让div span等元素能响应键盘事件操作指南

地址：http://www.17bianji.com/kaifa2/JS/22946.html

1/2 1