Web开发中设置快捷键来增强用户体验

浏览数：29 / 时间：2015年06月09日

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

<tr>

用户ID

</td>

<td>

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

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

</td>

</tr>

<tr>

密码

</td>

<td>

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

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

</td>

</tr>

</table>

<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