Web开发中设置快捷键来增强用户体验
从事对日外包一年多以来,发现日本的无论是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开发中设置快捷键来增强用户体验的更多相关文章
- 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践
提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...
- 移动Web 开发中的一些前端知识收集汇总
在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么 ...
- (转)Web开发中最致命的小错误
Web开发中最致命的小错误 现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性.本文收集了一些在 Web 开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助 Web 开发者更好 ...
- [译]如何在Web开发中使用Python
[译]如何在Web开发中使用Python 原文:HOWTO Use Python in the Web 摘要 这篇文档展示了Python如何融入到web中.它介绍了几种Python结合web服务器的方 ...
- SpringBoot学习(七)-->SpringBoot在web开发中的配置
SpringBoot在web开发中的配置 Web开发的自动配置类:在Maven Dependencies-->spring-boot-1.5.2.RELEASE.jar-->org.spr ...
- Web开发中的18个关键性错误
前几年,我有机会能参与一些有趣的项目,并且独立完成开发.升级.重构以及新功能的开发等工作. 本文总结了一些PHP程序员在Web开发中经常 忽略的关键错误,尤其是在处理中大型的项目上问题更为突出.典型的 ...
- 第123天:移动web开发中的常见问题
一.函数库 underscoreJS _.template: <ol class="carousel-indicators"> <!--渲染的HTML字符串--& ...
- MVC已经是现代Web开发中的一个很重要的部分,下面介绍一下Spring MVC的一些使用心得。
MVC已经是现代Web开发中的一个很重要的部分,下面介绍一下Spring MVC的一些使用心得. 之前的项目比较简单,多是用JSP .Servlet + JDBC 直接搞定,在项目中尝试用 Strut ...
- asp.net mvc 3 配置全局错误处理 Web.config中设置CustomError
摘自: http://www.myexception.cn/web/1130191.html asp.net mvc 配置全局异常处理 Web.config中设置CustomError Web.con ...
随机推荐
- Line Search and Quasi-Newton Methods 线性搜索与拟牛顿法
Gradient Descent 机器学习中很多模型的参数估计都要用到优化算法,梯度下降是其中最简单也用得最多的优化算法之一.梯度下降(Gradient Descent)[3]也被称之为最快梯度(St ...
- 【USACO】【section1.1】Your Ride Is Here
以前的账号忘记了,只能从头了. 入门题不解释,就是sumg和sumc初始值置1不能置0.开始享用一个循环计算出sumg和sumc,其实两个数组最大程度为6,节省不了什么时间. /*ID:Moment1 ...
- NDK(9)Application.mk各属性介绍
本文参考 : http://blog.csdn.net/grimraider/article/details/7587816 在NDK中编写的是本地程序,这个程序的源码在 jni 下,这个本地项目的配 ...
- 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 ...
- git使用ssh协议,生成公钥和私钥,并指定私钥
http://superuser.com/questions/232373/how-to-tell-git-which-private-key-to-use In ~/.ssh/config, add ...
- 巧用ifstream判断文件是否存在
最近在写手写数字的识别软件,训练样例数量巨大而且数字个数不唯一,有可能在中途粘出一部分做测试样例.因此写下面的脚本来获取文件名,之后丢到训练函数里. #include <algorithm> ...
- 4 张 GIF 图帮助你理解二叉查找树
二叉查找树(Binary Search Tree),也称二叉搜索树,是指一棵空树或者具有下列性质的二叉树: 1.任意节点的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 2.任意节点的右子树 ...
- Android应用主界面底部菜单实现
介绍 现在绝大多数主流的应用主界面,都会包含一个底部菜单,就拿腾讯的QQ与微信来说,看起来是这样的 <---我是底部菜单 原理 在很久以前,可以通过TabActivity实现相关功能,自从Fr ...
- Android实现分享内容到微信朋友圈
原文地址:http://yanwushu.sinaapp.com/android_wechat_share/ 由于需求,要实现在应用中实现分享文字+图片到微信朋友圈.在网上找了一些资料,总结如下: 思 ...
- 关于android软键盘enter键的替换与事件监听
android软键盘事件监听enter键 软件盘的界面替换只有一个属性android:imeOptions,这个属性的可以取的值有 normal,actionUnspecified,actionNo ...