jq文本框自动跳转下一个（输入密码）jsdemo效果示例（整理）-阿里云开发者社区

jq文本框自动跳转下一个（输入密码）jsdemo效果示例（整理）

2023-09-15 58

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jq文本框自动跳转下一个（输入密码）jsdemo效果示例（整理）

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文本框自动跳转下一个</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
      .input {
        display: block;
        width: 40px;
        height: 35px;
        float: left;
        margin-left: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="body">
          <input type="text" maxlength="1" class="input">
          <input type="text" maxlength="1" class="input">
          <input type="text" maxlength="1" class="input">
          <input type="text" maxlength="1" class="input">
          <input type="text" maxlength="1" class="input">
          <input type="text" maxlength="1" class="input">
    </div>
    <script>
      $(function() {
        var inputLength = $('input').length;
        //$('input').keyup(function(){})
        //使用jQuery事件代理的事件绑定方式，不需要对每个input进行事件绑定，有利于性能优化
        $('#body').delegate('input', 'keyup', function() {
          var _this = $(this),
            valLength = _this.val().length,
            index = _this.index();
          if (valLength > 0) {
            if ((index + 1) > inputLength) return false; //输入完成时进行操作
            _this.attr('data-in', 'true').next().focus();
          } else if (valLength == 0 && _this.attr('data-in') == 'true') {
            if (index == 0) return false; //删除所有时进行操作
            _this.attr('data-in', 'false').prev().focus();
          }
        });
      });
    </script>
  </body>
</html>

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>验证码输入框</title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
      input {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="ipt">
          <input type="text">
          <input type="text">
          <input type="text">
          <input type="text">
          <input type="text">
          <input type="text">
    </div>
    <script>
      $('#ipt input:gt(0)').attr('readOnly', 'true');
      $('#ipt input').keyup(function() {
        if (/^[0-9]{1}$/g.test($(this).val())) {
          $(this).next().removeAttr('readOnly').focus();
        } else {
          alert('请输入1位数字');
          $(this).val('');
        }
      });
    </script>
  </body>
</html>