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 相关文章推荐
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
seajs下require书写约定实例分析
May 16 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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图像处理函数大全(推荐收藏)
2013/07/11 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
require.js的用法详解
2015/10/20 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
python简单分割文件的方法
2015/07/30 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
python实现rsa加密实例详解
2017/07/19 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
Django中的文件的上传的几种方式
2018/07/23 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
学习python需要有编程基础吗
2020/06/02 Python
Python装饰器结合递归原理解析
2020/07/02 Python
财务管理专业毕业生求职信范文
2013/09/21 职场文书
教师演讲稿开场白
2014/08/25 职场文书
工伤私了协议书范本
2014/11/24 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript