从事对日外包一年多以来,发现日本的无论是WinForm项目还是Web项目都注重快捷键的使用,日本人操作的时候都喜欢用键盘而不是用鼠标去点,用他们的话来说"键盘永远比鼠标来的快",所以他们很注重键盘的操作,常见的操作就是按下Tab键来切换鼠标的焦点,按下回车键时能够提交表单等,难得今天周末,有时间好好研究一下在web开发中设置快捷键,这样可以方便用户操作,并且增强用户体验。  在web开发中主要是使用HTML的表单元素自带的tabindex属性和使用js设置组合快捷键来实现快捷键,
一、为HTML的表单元素设置tabindex来实现快捷键有如下的一段HTML代码:<div class="login-tr-title">用户登录</div>

<table class=" table-refer">

<tr>

<td class="login-td-title">

用户ID

</td>

<td>

<input id="txtUserName" name="txtUserName" type="text"

tabindex="1" maxlength="30" title="用户ID"/>

</td>

</tr>

<tr>

<td class="login-td-title">

密码

</td>

<td>

<input id="txtPassword" name="txtPassword" type="password"

tabindex="2" maxlength="30" title="密码" />

</td>

</tr>

</table>

<ul class="login-button">

<li class="login-main-button">

<asp:Button ID="btnLogin" runat="server" Text="登录" TabIndex="3" CssClass="s-button"/>

</li>

</ul>

</div>

复制代码这段HTML代码中每一个表单控件都设置了一个tabindex属性,属性值从小到大,控件设置上tabindex属性后,按下键盘上的Tab键切换光标时,光标就会按照控件设置的tabindex从小到大(1→2→3)顺序来切换了,这样就可以做到使用键盘上的Tab键来控制鼠标焦点落到按tabindex设置的顺序落到相应的控件上,按照w3c 的规定tabindex的取值范围是:0~32767。
  在web项目按下回车键时是做不到按照tabindex的设置顺序来切换鼠标焦点的,为了使按下回车键时也能按照tabindex的设置顺序来切换鼠标焦点,可以用JavaScript去控制回车键的响应动作,实现代码如下:$(document).ready(function () {

$("form").keydown(function (e) {

var actE = document.activeElement;

var nxtE = $("[tabindex='" + actE.tabIndex + "']")[0];

if (nxtE != null) {

var oType = nxtE.type;

if (oType == "textarea") return;

}

var tabIndex = actE.tabIndex + 1;

var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;

if (keyCode == 13) {

if (nxtE != null) {

oType = nxtE.type;

switch (oType) {

case "button": { if (nxtE.click) nxtE.click(); return false; }

case "select-one": { break; }

case "submit": { return true; }

default: break;

}

}

nxtE = $("[tabindex='" + tabIndex + "']")[0];

if (!nxtE) nxtE = $("[tabindex='0']")[0];

if (nxtE != null) {

nxtE.focus();

// var oType = nxtE.type;

// switch (oType) {

// case "button": { if (nxtE.click) nxtE.click(); break; }

// case "select-one": { break; }

// case "submit": { return true; }

// default: break;

// }

}

else {

return true;

}

return false;

}

});

});

复制代码二、使用js 设置组合快捷键  使用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) 设置enter 提交

if (e.keyCode == 13){
return submit();   
}
  一些常见的快捷键的KeyCode: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  

Web开发中设置快捷键来增强用户体验的更多相关文章

  1. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  2. 移动Web 开发中的一些前端知识收集汇总

    在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...

  3. (转)Web开发中最致命的小错误

    Web开发中最致命的小错误 现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性.本文收集了一些在 Web 开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助 Web 开发者更好 ...

  4. [译]如何在Web开发中使用Python

    [译]如何在Web开发中使用Python 原文:HOWTO Use Python in the Web 摘要 这篇文档展示了Python如何融入到web中.它介绍了几种Python结合web服务器的方 ...

  5. SpringBoot学习(七)-->SpringBoot在web开发中的配置

    SpringBoot在web开发中的配置 Web开发的自动配置类:在Maven Dependencies-->spring-boot-1.5.2.RELEASE.jar-->org.spr ...

  6. Web开发中的18个关键性错误

    前几年,我有机会能参与一些有趣的项目,并且独立完成开发.升级.重构以及新功能的开发等工作. 本文总结了一些PHP程序员在Web开发中经常 忽略的关键错误,尤其是在处理中大型的项目上问题更为突出.典型的 ...

  7. 第123天:移动web开发中的常见问题

    一.函数库 underscoreJS _.template: <ol class="carousel-indicators"> <!--渲染的HTML字符串--& ...

  8. MVC已经是现代Web开发中的一个很重要的部分,下面介绍一下Spring MVC的一些使用心得。

    MVC已经是现代Web开发中的一个很重要的部分,下面介绍一下Spring MVC的一些使用心得. 之前的项目比较简单,多是用JSP .Servlet + JDBC 直接搞定,在项目中尝试用 Strut ...

  9. asp.net mvc 3 配置全局错误处理 Web.config中设置CustomError

    摘自: http://www.myexception.cn/web/1130191.html asp.net mvc 配置全局异常处理 Web.config中设置CustomError Web.con ...

随机推荐

  1. Line Search and Quasi-Newton Methods 线性搜索与拟牛顿法

    Gradient Descent 机器学习中很多模型的参数估计都要用到优化算法,梯度下降是其中最简单也用得最多的优化算法之一.梯度下降(Gradient Descent)[3]也被称之为最快梯度(St ...

  2. 【USACO】【section1.1】Your Ride Is Here

    以前的账号忘记了,只能从头了. 入门题不解释,就是sumg和sumc初始值置1不能置0.开始享用一个循环计算出sumg和sumc,其实两个数组最大程度为6,节省不了什么时间. /*ID:Moment1 ...

  3. NDK(9)Application.mk各属性介绍

    本文参考 : http://blog.csdn.net/grimraider/article/details/7587816 在NDK中编写的是本地程序,这个程序的源码在 jni 下,这个本地项目的配 ...

  4. What is the difference between DAO and DAL?

    What is the difference between DAO and DAL? The Data Access Layer (DAL) is the layer of a system tha ...

  5. git使用ssh协议,生成公钥和私钥,并指定私钥

    http://superuser.com/questions/232373/how-to-tell-git-which-private-key-to-use In ~/.ssh/config, add ...

  6. 巧用ifstream判断文件是否存在

    最近在写手写数字的识别软件,训练样例数量巨大而且数字个数不唯一,有可能在中途粘出一部分做测试样例.因此写下面的脚本来获取文件名,之后丢到训练函数里. #include <algorithm> ...

  7. 4 张 GIF 图帮助你理解二叉查找树

    二叉查找树(Binary Search Tree),也称二叉搜索树,是指一棵空树或者具有下列性质的二叉树: 1.任意节点的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 2.任意节点的右子树 ...

  8. Android应用主界面底部菜单实现

    介绍 现在绝大多数主流的应用主界面,都会包含一个底部菜单,就拿腾讯的QQ与微信来说,看起来是这样的  <---我是底部菜单 原理 在很久以前,可以通过TabActivity实现相关功能,自从Fr ...

  9. Android实现分享内容到微信朋友圈

    原文地址:http://yanwushu.sinaapp.com/android_wechat_share/ 由于需求,要实现在应用中实现分享文字+图片到微信朋友圈.在网上找了一些资料,总结如下: 思 ...

  10. 关于android软键盘enter键的替换与事件监听

    android软键盘事件监听enter键  软件盘的界面替换只有一个属性android:imeOptions,这个属性的可以取的值有 normal,actionUnspecified,actionNo ...