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

　　从事对日外包一年多以来，发现日本的无论是WinForm项目还是Web项目都注重快捷键的使用，日本人操作的时候都喜欢用键盘而不是用鼠标去点，用他们的话来说"键盘永远比鼠标来的快"，所以他们很注重键盘的操作，常见的操作就是按下Tab键来切换鼠标的焦点，按下回车键时能够提交表单等，难得今天周末，有时间好好研究一下在web开发中设置快捷键，这样可以方便用户操作，并且增强用户体验。

　　在web开发中主要是使用HTML的表单元素自带的tabindex属性和使用js设置组合快捷键来实现快捷键，

一、为HTML的表单元素设置tabindex来实现快捷键

有如下的一段HTML代码：

 1 <div class="login-tr-title">用户登录</div>

 2          <table class=" table-refer">

 3             <tr>

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

 5                     用户ID

 6                 </td>

 7                 <td>

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

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

10                 </td>

11             </tr>

12             <tr>

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

14                     密码

15                 </td>

16                 <td>

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

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

19                 </td>

20             </tr>

21         </table>

22         <ul class="login-button">

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

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

25             </li>

26         </ul>

27 </div>

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

 1 $(document).ready(function () {

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

 3         var actE = document.activeElement;

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

 5         if (nxtE != null) {

 6             var oType = nxtE.type;

 7             if (oType == "textarea") return;

 8         }

 9         var tabIndex = actE.tabIndex + 1;

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

11         if (keyCode == 13) {

12             if (nxtE != null) {

13                 oType = nxtE.type;

14                 switch (oType) {

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

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

17                     case "submit": { return true; }

18                     default: break;

19                 }

20             }

21 

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

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

24             if (nxtE != null) {

25                 nxtE.focus();

26 //                                var oType = nxtE.type;

27 //                                switch (oType) {

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

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

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

31 //                                    default: break;

32 //                                }

33             }

34             else {

35                 return true;

36             }

37             return false;

38         }

39     });

40 });

二、使用js 设置组合快捷键

　　使用js设置快捷键的本质就是获得你要设置的这个键的keyCode 的值，如果要加ctrl，alt，shift，那么就添加一个ctrlkey，altKey，shiftKey来判断下，所以关键在于获取keycode的值。

　　(1) 设置 ctrl +enter 提交　　

1 if (e.ctrlKey && e.keyCode == 13){ 　

2 　　　return submit(); 　

3 }

　　(2) 设置  Alt+ 方向键 ←提交

1 if (e.altKey&& e.keyCode == 37){  

2 　　　　return submit(); 

3 }

　　(3) 设置  shift+F10 提交

1 if (e.shiftKey&& e.keyCode == 37){  　

2 　　　return submit();

3 

4 }

　　(4) 设置enter 提交

1 if (e.keyCode == 13){

2 　return submit();  　

3 }

　　一些常见的快捷键的KeyCode：

 1 keycode    8 = BackSpace BackSpace

 2 　　keycode    9 = Tab Tab

 3 　　keycode   12 = Clear

 4 　　keycode   13 = Enter

 5 　　keycode   16 = Shift_L

 6 　　keycode   17 = Control_L

 7 　　keycode   18 = Alt_L

 8 　　keycode   19 = Pause

 9 　　keycode   20 = Caps_Lock

10 　　keycode   27 = Escape Escape

11 　　keycode   32 = space space

12 　　keycode   33 = Prior

13 　　keycode   34 = Next

14 　　keycode   35 = End

15 　　keycode   36 = Home

16 　　keycode   37 = Left

17 　　keycode   38 = Up

18 　　keycode   39 = Right

19 　　keycode   40 = Down

20 　　keycode   41 = Select

21 　　keycode   42 = Print

22 　　keycode   43 = Execute

23 　　keycode   45 = Insert

24 　　keycode   46 = Delete

25 　　keycode   47 = Help　　

View Code