前天改一个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) 无效,可能焦点,添加焦点。的更多相关文章

  1. 在JS/jQuery中,怎么触发input的keypress/keydown/keyup事件?

    怎么触发keypress/keydown/keyup事件? 问题: 1.在之前的写的input后面添加了搜索按钮 2.input只有keyup事件,如下: $("#desktop_folde ...

  2. DataGridView在Cell编辑状态响应回车键下的KeyPress/KeyDown/KeyUp事件

    我们知道由于DataGridView的单元格DataGridCell处于编辑的时候,当你按Enter键,那么DataGridView是不会激发KewPress/KeyDown/KeyUp这些事件的,因 ...

  3. angular js 的 ng-keyup 监听 keydown keyup事件获取 keyCode

    参考这个页面.http://www.angularjshub.com/examples/eventhandlers/keyboardevents/ Html页面代码: <input ng-mod ...

  4. Vue2键盘事件:keydown/keyup...

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  5. keyDown keyPress keyUp 事件的区别

    keyDown keyPress keyUp  事件的区别 一 触发顺序 显而易见,事件发生的顺序是: keydown --> keypress --> keyup 当按住一个键一段时间后 ...

  6. Winform下KeyDown,KeyPress,KeyUp事件的总结(转)

    原文: http://www.cnblogs.com/xiashengwang/archive/2011/09/15/2578798.html 在winform程序中,经常会用到这几个事件用于控制数字 ...

  7. C#控件中的KeyDown、KeyPress 与 KeyUp事件浅谈

    研究了一下KeyDown,KeyPress 和 KeyUp 的学问.让我们带着如下问题来说明: 1.这三个事件的顺序是怎么样的? 2.KeyDown 触发后,KeyUp是不是一定触发? 3.三个事件的 ...

  8. keydown、input 和 keyup 事件

    keydown.keyup 属于键盘事件,input 属于文本事件. keydown:当用户按下键盘上的任意按键时触发,如果按住不放,会重复触发此事件. keyup:当用户释放键盘上的按键时触发. i ...

  9. keyup事件、keydown事件和input事件的区别

    keydown.keyup 属于键盘事件,input 属于文本事件 详细说明: keydown:当用户按下键盘上的任意按键时触发,如果按住不放,会重复触发此事件. keyup:当用户释放键盘上的按键时 ...

随机推荐

  1. C#中的DateTime:本周第一天,本月第一天,今年第一天,本周第一天的时间

    有时辰需要按照当前时刻,断定其它的都没有什么难度,只是本季度稍稍麻烦些.因为一年有四个季度,可以按照当前月份,获得本季度第一个月的月份,然后这个月的第一天,就是本季度的第一天了 DateTime dt ...

  2. android输入框显示在软键盘上边

    有时候在界面需要输入的时候,如果输入框在界面的下方,软键盘弹出的时候会遮挡输入框界面,对用户的体验不是很好. 在网上找的别人的解决方案 首先: 清单文件里面配置:android:windowSoftI ...

  3. AjaxPro使用方法

    无意中看到同事用AjaxPro用,看到很不错,特长是前后台传输数据特别方便. 最好的教材就是拿到就可以用,方便大家. 以前数据传输用FORM提交,或者在前台用JASON拼接然后通过AJAX方式提交.总 ...

  4. 使用SoapUI 测试 Web Service

    一.官方定义 soapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功能/负载/符合性测试.该工具既可作为一个单独的测试软件使用,也可利用插件集成到Eclip ...

  5. swift项目-模仿团购(主界面的搭建,以及首页的一些细节)

    以前学习oc的时候写的一个团购的项目,现在学习swift,拿来用swift写一遍,也是连猜带蒙的,一点一点的往上凑. 今天主要是把主要的架子搭起来了. 主要有:UITabBarController,U ...

  6. ios开发:代理设计模式

    代理是一种简单而功能强大的设计模式,这种模式用于一个对象“代表”另外一个对象去做和实现一些东西. 主对象维护一个代理(delegate)的引用并且在合适的时候向这个代理发送消息,这个消息通知“代理”对 ...

  7. 简介spring中MethodReplacer的用法

    欢迎转载交流:个人博客地址http://www.cnblogs.com/shizhongtao/p/3468713.html org.springframework.beans.factory.sup ...

  8. KMeans聚类算法Hadoop实现

    Assistance.java  辅助类,功能详见注释 package KMeans; import org.apache.hadoop.conf.Configuration; import org. ...

  9. Linux 内核 链表 的简单模拟(1)

    第零章:扯扯淡 出一个有意思的题目:用一个宏定义FIND求一个结构体struct里某个变量相对struc的编移量,如 struct student { int a; //FIND(struct stu ...

  10. DEDECMS中,channelartlist标签

    当前频道的下级栏目的内容列表 dede:channelartlist 标签: {dede:channelartlist row=6} <dl> <dt><a href=' ...