如何让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>
相关文章
这篇文章主要介绍了如何使用ReactHook和Context实现全局主题切换的功能,通过创建一个Context对象和一个ThemeProvider组件,可以将当前主题存储在Context中,并提供一个切换主题的方法,文中给出了详细的代码示例,需要的朋友可以参考下2025-03-03
这篇文章介绍了JavaScript防抖动与节流处理的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
在JS中判断浏览器的类型，估计是每个编辑过页面的开发人员都遇到过的问题2012-10-10
这篇文章主要介绍了用原生 JS 实现 innerHTML 功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之oltip提示工具的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
整理Javascript数组学习笔记,之前一系列的文章是跟我学习Javascript，本文就是进一步学习javascript数组，希望大家继续关注2015-11-11
这篇文章主要为大家详细介绍了JS代码实现页面切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
Foo.getName算是一道比较老的面试题了,大致百度了一下在17年就有相关文章在介绍它,下面这篇文章主要给大家介绍了关于一道超经典js面试题Foo.getName()的相关资料,需要的朋友可以参考下2022-03-03
JavaScript中“+=”的应用...2007-02-02
这篇文章主要为大家详细介绍了js canvas实现写字动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
最新评论