web前端代码,input标签使用回车替换teb键以此来快捷键切换文本框

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>play some html</title>
  <style type="text/css">
    ul li{
      list-style: none;
    }

  </style>
</head>
<body>
<form id="form1">
  <input type="text" tabindex="1" onkeydown="enterToTab(event,this);"/>
  <input type="text" tabindex="3" onkeydown="enterToTab(event,this);"/>
  <input type="text" tabindex="2" onkeydown="enterToTab(event,this);"/>
  <input type="text" tabindex="4" onkeydown="enterToTab(event,this);"/>
  <input type="button" value="click me" onclick="alert('hello world')" tabindex="5" onkeydown="enterToTab(event,this);"/>
</form>

  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>
  <script type="text/javascript">
    function enterToTab(event, input) {
      var e = event?event:window.event;
      var form = document.getElementById('form1');
      if(e.keyCode == 13) {
        var tabindex = input.getAttribute('tabindex');
        tabindex++;
        var inputs = form.getElementsByTagName('input');
        for(var i=0,j=inputs.length; i<j; i++) {
          if (inputs[i].getAttribute('tabindex') == tabindex) {
            inputs[i].focus();
            break;
          }
        }
      }
    }
  </script>
</body>
</html>
tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时),所以可以通过改变当前input的tabindex属性的大小,改变当触发快捷键的时候,文本框切换的顺序。

Event 对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

当靠近极限的那一刻,就是突破极限,也是自己获得最多的时候

posted on 2018-10-09 15:51  EastChilde  阅读(993)  评论(0编辑  收藏  举报

导航