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

Web开发中设置快捷键来增强用户体验,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。