zoukankan      html  css  js  c++  java
  • 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  

  • 相关阅读:
    目标检测
    模型压缩-L1-norm based channel pruning(Pruning Filters for Efficient ConvNets)
    ubuntu docker 环境安装
    姿态估计的数据集说明
    详解Pytorch中的网络构造,模型save和load,.pth权重文件解析
    MSE, MAE, Huber loss详解
    maskrcnn_benchmark 理解
    模型压缩-Learning Efficient Convolutional Networks through Network Slimming
    Focal Loss
    Github桌面版使用教程
  • 原文地址:https://www.cnblogs.com/taofx/p/4139838.html
Copyright © 2011-2022 走看看