首页 文章

如何在每个输入达到最大长度时自动提前聚焦

提问于
浏览 次
1

为了提高我正在构建的信用卡表单的可用性，我希望一旦用户输入了 input 的 maxlength 属性中允许的字符，浏览器就会将焦点移动到下一个输入 .

我目前已经用三个输入字段完成了这个，但是以一种非常笨重，不可扩展的方式 . 见下面的代码 .

我想做的是编写以下内容：

如果具有autotab类的输入已达到maxlength，则将焦点移动到任何类的下一个最接近的输入 . 另外（我在下面的代码中还没有完成）如果具有类autotab的输入的值为空/ null，并且按下退格/删除键，焦点应该移动到任何类的前一个最接近的输入

我的目标是摆脱对特定字段编写变量的依赖，并稍微自动化这个过程 .

$( document ).ready(function() {

    var CCCardFill = 0;
    var CCExpMonthFill = 0;
    var CCExpYearFill = 0;  

    var CCCardMax = 16;
    var CCExpMonthMax =  2;
    var CCExpYearMax =  4;

   $( "input" ).keyup(function() {
      var CCCardFill = $(".CCCard").val().length;
      var CCExpMonthFill = $(".CCExpMonth").val().length;
      var CCExpYearFill = $(".CCExpYear").val().length;

      if (CCCardFill >= CCCardMax) {
        $(".CCExpMonth").focus();
      }
      if (CCExpMonthFill >= CCExpMonthMax) {
        $(".CCExpYear").focus();
      }
      if (CCExpYearFill >= CCExpYearMax) {
        $(".CCName").focus();
      }

  });

  });

功能代码在这里：http://codepen.io/jeremypbeasley/pen/BoJVRW

javascript jquery html forms usability

5 回答

  • 0

    您可以使用 maxLength 和 value.length 属性 . 当它达到最大长度时，您可以使用 next().focus() 简单地聚焦下一个项目 .

    $( "input[maxlength]" ).keyup(function() {
    var maxLen = this.maxLength;
    var currentLen = this.value.length;

    if (maxLen === currentLen)
    {
        $(this).next().focus(); 
    } 
});

    这是working JSFiddle demo .

    如果 input 之间有其他HTML元素，您可以使用 nextAll("input").first() 来获取 closest element matching the selector after this one ：

    $(this).nextAll("input").first().focus();

    Another one JSFiddle Demo .

    回复于
  • 1

    在您的情况下，您可以简单地做：

    $(this).next("input").focus();

    要替换 .focus() 项目 . 这将从您当前的元素移动到DOM中的下一个 input 元素 .

    回复于
  • 2
    $("input").keyup(function() {
  var value = $(this).val().length;
  var max = $(this).attr('maxlength')
  console.log(value);
  console.log(max);
  if (value == max) {
    console.log('equal');
    $("input").next().focus();
  }
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type='text' maxlength='10'>
<input type='text' maxlength='10'>

    尝试获取attr maxlength并将其与val（） . length进行比较，如果相等焦点下一个输入

    回复于
  • 0
    <script>
function autotab(current,to){
    if (current.getAttribute && 
      current.value.length==current.getAttribute("maxlength")) {
        to.focus() 
        }
}
</script>

<b>Enter your phone number ex (1-888-555-1234):</b>
<form name="telephone">
<input type="text" name="phone0" 
    size=2 onKeyup="autotab(this, document.telephone.phone1)" maxlength=1>- 
<input type="text" name="phone1" 
    size=4 onKeyup="autotab(this, document.telephone.phone2)" maxlength=3>- 
<input type="text" name="phone2" 
    size=4 onKeyup="autotab(this, document.telephone.phone3)" maxlength=3>- 
<input type="text" name="phone3" size=5 maxlength=4>
</form>

    以下是我将如何实现这一目标 . 每个元素使用onKeyup事件来调用autotab函数，发送自己的对象，然后关注以下元素的对象，然后测试maxlength .

    回复于
  • 0

    您想查看触发事件的输入 . 事件处理程序中的 this 是想要的元素

    var $inputs = $( "input" )

$inputs.keyup(function() {
   var $input = $(this), max = $input.attr('maxlength');
   if(max){
      max = parseInt(max,10);
      if(this.value && this.value.length == max){
           $inputs( $inputs.index(this) +1).focus()
      }
   }

})
    回复于

相关问题