<span> <div> 局部 keydown ,keyup事件。页面部分div $(document) 无效,可能焦点,添加焦点。
前天改一个bug, js 实现的一个 面板拖拉,左右各两个列表,中间面板画线连接,页面左侧列表选中后,key 事件无效。右侧选中确有效,很奇怪,查看源码,左侧选中后,$(document).on("keydown",function(event){} 对左侧无效,由于无异常抛出,只能一点点代码。一个字,累。
确定页面部分div失去焦点,索性,给外面最大div 添加一个 获取焦点事件,解决 。
$("#myspan").attr("tabindex",0);
$("#myspan").focus();
The keydown event is sent to an element when the user first presses a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.
以上是从jquery文档中copy下的一段文本,它说明我们可以给form元素绑定keydown事件,因为它们可以获取焦点,但怎样去给div、span绑定呢?
答案就是tabindex这个属性
js中改变这个属性:jsObj.tabIndex
jquery : $(selector).attr("tabindex",value)
tabindex
元素的tabindex属性用来定义元素是否可以获取焦点,是否可以通过连续的焦点导航(一般情况是按tab键)获取焦点,与你获取焦点的顺序。
其值必须是整数值。
如果没有设置,或者设置的值不正确,则按照惯例执行。
如果是负数,用户不可以通过连续的焦点导航获取焦点,但可以用其他方式获取焦点。
如果是零,则可以通过连续的焦点导航获取焦点,按照惯例确定顺序。
如果是正数,则可以通过连续的焦点导航获取焦点,按照该值确定顺序。
div默认是得不到焦点的,可以为其设置tabindex属性使其可以获得焦点。也就可以绑定键盘事件。
事例 :
<span id="myspan"></span>
js:
$("#myspan").attr("tabindex",0);
$("#myspan").focus();
此文章来自网络转载
<span> <div> 局部 keydown ,keyup事件。页面部分div $(document) 无效,可能焦点,添加焦点。的更多相关文章
- 在JS/jQuery中,怎么触发input的keypress/keydown/keyup事件?
怎么触发keypress/keydown/keyup事件? 问题: 1.在之前的写的input后面添加了搜索按钮 2.input只有keyup事件,如下: $("#desktop_folde ...
- DataGridView在Cell编辑状态响应回车键下的KeyPress/KeyDown/KeyUp事件
我们知道由于DataGridView的单元格DataGridCell处于编辑的时候,当你按Enter键,那么DataGridView是不会激发KewPress/KeyDown/KeyUp这些事件的,因 ...
- angular js 的 ng-keyup 监听 keydown keyup事件获取 keyCode
参考这个页面.http://www.angularjshub.com/examples/eventhandlers/keyboardevents/ Html页面代码: <input ng-mod ...
- Vue2键盘事件:keydown/keyup...
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
- keyDown keyPress keyUp 事件的区别
keyDown keyPress keyUp 事件的区别 一 触发顺序 显而易见,事件发生的顺序是: keydown --> keypress --> keyup 当按住一个键一段时间后 ...
- Winform下KeyDown,KeyPress,KeyUp事件的总结(转)
原文: http://www.cnblogs.com/xiashengwang/archive/2011/09/15/2578798.html 在winform程序中,经常会用到这几个事件用于控制数字 ...
- C#控件中的KeyDown、KeyPress 与 KeyUp事件浅谈
研究了一下KeyDown,KeyPress 和 KeyUp 的学问.让我们带着如下问题来说明: 1.这三个事件的顺序是怎么样的? 2.KeyDown 触发后,KeyUp是不是一定触发? 3.三个事件的 ...
- keydown、input 和 keyup 事件
keydown.keyup 属于键盘事件,input 属于文本事件. keydown:当用户按下键盘上的任意按键时触发,如果按住不放,会重复触发此事件. keyup:当用户释放键盘上的按键时触发. i ...
- keyup事件、keydown事件和input事件的区别
keydown.keyup 属于键盘事件,input 属于文本事件 详细说明: keydown:当用户按下键盘上的任意按键时触发,如果按住不放,会重复触发此事件. keyup:当用户释放键盘上的按键时 ...
随机推荐
- php学习-快速开发框架thinkphp-day1
以下操作针对windows系统. 1.下载thinkphp3.23-all并解压 官方网站: http://www.thinkphp.cn/down.html 2.开发工具使用phpstorm htt ...
- Ajax-数据格式-xml,json
xml demo testDataXml <%@ page language="java" contentType="text/html; charset=UTF- ...
- Agile.Net 组件式开发平台 - 平台系统介绍
平台介绍 Agile.Net 组件式开发平台是一款针对企业级产品的开发框架,平台架构基于SOA服务体系,多层组件式架构打造.平台提供企业应用开发所需的诸如ORM.IOC.WCF.EBS.SOA等分布式 ...
- 用命令行将Java程序打包为jar文件
如何把写好的Java程序打包为jar文件呢?有两种方式可以选择 1.命令行的方式: 打包jar cf JAR文件名称 程序文件名称或者程序所在的文件夹举例:jar cf MyApp.jar D:Jav ...
- 第五十篇、OC中常用的第三插件
1.UIViewController-Swizzled 当你接手一个新项目的时候,使用该插件,可以看到控制器的走向,当前控制是哪个,下一个跳转到哪里 2. 一个Xcode小插件,将Json直接转成模型 ...
- signal信号类型列表
Linux支持的信号列表如下.很多信号是与机器的体系结构相关的 信号值 默认处理动作 发出信号的原因 SIGHUP 1 A 终端挂起或者控制进程终止 SIGINT 2 A 键盘中断(如break键被按 ...
- C# 微信扫码支付 回调页面
.NET版 微信扫码支付,官方推荐使用[模式二] 一.微信扫码支付模式一: 1.回调页面:官方demo中example文件下的NativeNotifyPage.aspx 2.微信回调地址:http:/ ...
- PDF编辑、删除、替换某页面或文字
在工作中,我们常常会用到PDF,当然尤其是会计,我虽然是程序员,但是“小老鼠”是会计,前几天,突然问我,怎么样将PDF中的某个页面替换掉,也就是删掉某页然后再从另外一个地方找一页补上来: 还需要改变这 ...
- EasyUI –tree、combotree学习总结
EasyUI –tree.combotree学习总结 一. tree总结 (一).tree基本使用 tree控件是web页面中将数据分层一树形结构显示的. 使用$.fn.tree.defaults ...
- Repeater和Gridview前台显示行号的方法
Repeater : Container.ItemIndex (行号从零开始,如果想改为从1开始,那么可以将以上的代码改为Container.ItemIndex + 1),见下示例: <asp: ...