如何让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'弹出框弹出，我知道这个问题的发生原因是因为事件是从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>
译文如下：
我有一个可编辑的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支持IE和firefox(FF)的渐变透明效果
DataThis可以发送任何标签，这个标签没有ID也可以，因为用的是自定义属性。2008-10-10
这篇文章主要介绍了js for等循环 跳出多层循环，终止循环执行的方法,需要的朋友可以参考下2018-10-10
谈谈js中的prototype及prototype属性解释和常用方法
prototype是javascript中笔记难理解的一部分内容，下面通过几个关键知识点给大家讲解js中的prototype，对js中的prototype相关知识感兴趣的朋友一起学习吧2015-11-11
今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子，我做的第二件事就是js模拟用鼠标拖出矩形框，代码很简单2009-04-04
JavaScript操作压缩图片原理不难，已有成熟 API，然而在实际输出压缩后结果却总有意外，有些图片竟会越压缩越大，加之终端（手机）类型众多，有些手机压缩图片甚至变黑。本文将一步一步解决此类问题2021-05-05
移动div对于很多的网有们来说是一件很熟悉的事了，本文老生长谈，用js实现鼠标移动div，希望大伙们可以举一反三，感兴趣的朋友可以参考下，或许本文对你有所帮助2013-01-01
这篇文章主要为大家详细介绍了微信小程序实现顶部选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
javascript 制作坦克大战游戏初步 图片与代码...2007-11-11
今天小编就为大家分享一篇layui radio性别单选框赋值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了微信小程序云开发实现增删改查功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
最新评论