如何让div span等元素能响应键盘事件操作指南


Posted in Javascript onNovember 13, 2012

在我这几天的工作中遇到了一个问题,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 相关文章推荐
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
axios学习教程全攻略
Mar 26 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
小程序实现投票进度条
Nov 20 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 #Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 #Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 #Javascript
Javascript开发之三数组对象实例介绍
Nov 12 #Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 #Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 #Javascript
php对mongodb的扩展(初识如故)
Nov 11 #Javascript
You might like
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
Phpbean路由转发的php代码
2008/01/10 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
python实现的重启关机程序实例
2014/08/21 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
python如何获取apk的packagename和activity
2020/01/10 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
班干部演讲稿
2014/04/24 职场文书
就业意向书
2014/07/29 职场文书
天猫活动策划方案
2014/08/21 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
Mysql binlog日志文件过大的解决
2021/10/05 MySQL