js设置组合快捷键/tabindex功能的方法


Posted in Javascript onNovember 21, 2013

快捷键在日常的使用还是挺多的,例如熟悉的粘贴ctrl+v,复制 ctrl+c,使用快捷键能提高我们的做事效率,特别是当我们熟悉了一种操作后,再次使用它来进行操作就会变得很方便,很顺手,对于使用键盘的重度用户,键盘永远比鼠标来的快。

1)tabindex:

就是利用tab来轻松的控制页面中的链接和表单元素
它的用法很简单:obj.tabindex  = tabindex; 这个tabindex 的值,按照w3c 的规定可以从0开始 一直到32767

2) js 设置组合快捷键

本质就是获得你要设置的这个键的keyCode 的值,如果要加ctrl,alt,shift,那么就添加一个ctrlkey,altKey,shiftKey来判断下,所以关键在于keycode的值

(1) 设置 ctrl +enter 提交
if (e.ctrlKey && e.keyCode == 13){
return submit();
}

(2) 设置  Alt+ 方向键 ←
if (e.altKey&& e.keyCode == 37){
return submit();
}

(3) 设置  shift+F10
if (e.shiftKey&& e.keyCode == 37){
return submit();
}

4) 设置en
ter 提交
if (e.keyCode == 13){
return submit();
}

这里附加一些常见的快捷键:
keycode    8 = BackSpace BackSpace
keycode    9 = Tab Tab
keycode   12 = Clear
keycode   13 = Enter
keycode   16 = Shift_L
keycode   17 = Control_L
keycode   18 = Alt_L
keycode   19 = Pause
keycode   20 = Caps_Lock
keycode   27 = Escape Escape
keycode   32 = space space
keycode   33 = Prior
keycode   34 = Next
keycode   35 = End
keycode   36 = Home
keycode   37 = Left
keycode   38 = Up
keycode   39 = Right
keycode   40 = Down
keycode   41 = Select
keycode   42 = Print
keycode   43 = Execute
keycode   45 = Insert
keycode   46 = Delete
keycode   47 = Help
注意:浏览器的兼容性问题

Javascript 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
javascript new一个对象的实质
Jan 07 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
Node.js文件操作详解
Aug 16 Javascript
原生js的数组除重复简单实例
May 24 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
Angular的$http与$location
Dec 26 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
jtable列中自定义button示例代码
Nov 21 #Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 #Javascript
JS两种定义方式的区别、内部原理
Nov 21 #Javascript
jQuery操作input值的各种方法总结
Nov 21 #Javascript
jqgrid 表格数据导出实例
Nov 21 #Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 #Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 #Javascript
You might like
PHP编程与应用
2006/10/09 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
jQuery知识点整理
2015/01/30 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
使用pip发布Python程序的方法步骤
2018/10/11 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python 占位符的使用方法详解
2019/07/10 Python
python找出因数与质因数的方法
2019/07/25 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
python属于哪种语言
2020/08/16 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
python turtle绘图
2022/05/04 Python