从事对日外包一年多以来,发现日本的无论是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. iOS:模态弹出窗控制器UIPopoverPresentationController

    模态弹出窗控制器:UIPopoverPresentationController 实质:就是将内容控制器包装成PopoverPresentationController的形式,然后再模态出来,必须指定 ...

  2. 整合Struts2+SiteMesh+Spring+MyFaces(JSF)+Freemarker的时候启动服务器报错ClassNotFoundException: org.apache.struts2.sitemesh.FreeMarkerPageFilter

    我一琢磨,难道freemarker与struts2的整合也需要添加一个struts2-freemarker-plugin的jar包? 后来找了半天,确认不需要这个. 然后我就上网搜,这个FreeMar ...

  3. javascript 网络是否连接的几种方案

    js   网络是否连接的几种方案 1.通过html5的新属性: window.onload = function () {            var isOnLine = navigator.on ...

  4. C#添加日志

    /// <summary> /// 记录日志 /// </summary> /// <param name="msg"></param&g ...

  5. 安装 jdk、tomcat

    jdk 下载地址:http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-java ...

  6. 每天一个小算法(matlab armijo)

    下面是 armijo线搜索+最速下降法的小程序,matlab用的很不熟,费了不少劲. 函数: function g=fun_obj(x) syms a b f = 1/2*a^2+b^2-a*b-2* ...

  7. hihoCoder 1051补提交卡(贪心 枚举)

    http://hihocoder.com/problemset/problem/1051 既然要选择最长连续提交天数,那么提交卡必须连续使用才有可能得到最优解,这样贪心,然后从头到尾扫一遍求出最大值. ...

  8. Top 10 steps to optimize data access in SQL Server

    2009年04月28日 Top 10 steps to optimize data access in SQL Server: Part I (use indexing) 2009年06月01日 To ...

  9. 安装hadoop

    生成yum源 cd /var/ftp/pub/cdh/5 createrepo --update . 从节点 yum clean all 配置yum库 /etc/yum.repos.d # cat / ...

  10. CentOS 安装 mono

    1. 安装EPEL 2. 安装软件包 yum install bison gettext glib2 freetype fontconfig libpng libpng-devel libX11 li ...