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