聚焦next / prev输入到达maxlength或退格键 [英] Focus next/prev input on maxlength reached or backspace keypress

问题描述

我看过HTML表单，光标从一个输入字段自动移动到另一个输入字段，并使用退格键移动到上一个字段。在需要粘贴到跨越多个输入字段的序列号中，或者像在多个字段输入中输入或粘贴数字时，它非常有用。

  $（document）.ready（function（）{$（'。Box'）。on（keyup，function（e）{var Length = $（this）.attr（maxlength ）; if（$（this）.val（）。length> = parseInt（Length））{$（this）.removeClass（productkey1）。addClass（productkey2）; $（this）.next .Box'）。focus（）;}}）;}）; $（document）.ready（function（）{$（'。Box'）。on（keydown，function（e）{var Length = $ （this）.attr（maxlength）; if（$（this）.val（）。length> parseInt（Length））{$（this）.removeClass（productkey2）。 $（this）.prev（'。Box'）。focus（）;}}）;}）;  

  .Box：focus {border：thin solid＃FFD633; -webkit-box-shadow：0px 0px 3px＃F7BB2E; -moz-box-shadow：0px 0px 3px＃F7BB2E; box-shadow：0px 0px 3px＃F7BB2E;}。Box {height：15px;宽度：4％; text-align：justify; letter-spacing：5px; padding：10px;}  

 < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>< / script>< div> < sapn>输入键代码：< / sapn> < input class =Box productkey1style =width：35px; type =passwordname =number1maxlength =1> < input class =Box productkey1style =width：35px; type =passwordname =number2maxlength =1> < input class =Box productkey1style =width：35px; type =passwordname =number3maxlength =1> < input class =Box productkey1style =width：35px; type =passwordname =number4maxlength =1>< / div>  

$ b

解决方案

您可以通过检查当前输入中的文本的 length 当按下退格键时：

  $（document）.ready（function（）{$（' keyup，function（e）{var $ input = $（this）; if（$ input.val（）。length == 0& e.which == 8）{$ input.toggleClass（productkey2 productkey1 ）.prev（'。Box'）。focus（）;} else if（$ input.val（）。length> = parseInt（$ input.attr（maxlength），10））{$ input.toggleClass （productkey1 productkey2）。next（'。Box'）。focus（）;}}）;}）;  

  .Box：focus {border：thin solid＃FFD633; -webkit-box-shadow：0px 0px 3px＃F7BB2E; -moz-box-shadow：0px 0px 3px＃F7BB2E; box-shadow：0px 0px 3px＃F7BB2E;}。Box {height：15px; width：50px; text-align：justify; letter-spacing：5px; / * CSS letter-spacing属性* / padding：10px;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>< / script>< div> < sapn>输入键代码：< / sapn> < input class =Box productkey1type =passwordname =number1maxlength =4> < input class =Box productkey1type =passwordname =number2maxlength =4> < input class =Box productkey1type =passwordname =number3maxlength =4> < input class =Box productkey1type =passwordname =number4maxlength =4>< / div>   
 
 
 
另外请注意，我在单个事件处理程序中处理了 on（）  toggleClass（）在单个调用中修改这两个类。
 
I have seen HTML forms whereby the cursor moves from one input field to another automatically and uses backspace to move to the previous field. It's useful in situations like when you are required to paste in a serial number that spans across several input fields, or like typing or pasting number that is taken in multiple field inputs.



$(document).ready(function() {
  $('.Box').on("keyup", function(e) {
    var Length = $(this).attr("maxlength");
    if ($(this).val().length >= parseInt(Length)) {
      $(this).removeClass("productkey1").addClass("productkey2");
      $(this).next('.Box').focus();
    }
  });
});

$(document).ready(function() {
  $('.Box').on("keydown", function(e) {
    var Length = $(this).attr("maxlength");
    if ($(this).val().length > parseInt(Length)) {
      $(this).removeClass("productkey2").addClass("productkey1");
      $(this).prev('.Box').focus();
    }
  });
});

.Box:focus {
  border: thin solid #FFD633;
  -webkit-box-shadow: 0px 0px 3px #F7BB2E;
  -moz-box-shadow: 0px 0px 3px #F7BB2E;
  box-shadow: 0px 0px 3px #F7BB2E;
}
.Box {
  height: 15px;
  width: 4%;
  text-align: justify;
  letter-spacing: 5px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <sapn>Enter Key Code :</sapn>
  <input class="Box productkey1" style="width: 35px;" type="password" name="number1" maxlength="1">
  <input class="Box productkey1" style="width: 35px;" type="password" name="number2" maxlength="1">
  <input class="Box productkey1" style="width: 35px;" type="password" name="number3" maxlength="1">
  <input class="Box productkey1" style="width: 35px;" type="password" name="number4" maxlength="1">
</div>



解决方案
You can achieve this by checking that the length of the text in the current input is zero when the backspace key is pressed:



$(document).ready(function() {
  $('.Box').on("keyup", function(e) {
      var $input = $(this);
      if ($input.val().length == 0 && e.which == 8) {
        $input.toggleClass("productkey2 productkey1").prev('.Box').focus();
      }
      else if ($input.val().length >= parseInt($input.attr("maxlength"), 10)) {
        $input.toggleClass("productkey1 productkey2").next('.Box').focus();
      }
  });
});

.Box:focus {
  border: thin solid #FFD633;
  -webkit-box-shadow: 0px 0px 3px #F7BB2E;
  -moz-box-shadow: 0px 0px 3px #F7BB2E;
  box-shadow: 0px 0px 3px #F7BB2E;
}
.Box {
  height: 15px;
  width: 50px;
  text-align: justify;
  letter-spacing: 5px;
  /*CSS letter-spacing Property*/
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <sapn>Enter Key Code :</sapn>
  <input class="Box productkey1" type="password" name="number1" maxlength="4">
  <input class="Box productkey1" type="password" name="number2" maxlength="4">
  <input class="Box productkey1" type="password" name="number3" maxlength="4">
  <input class="Box productkey1" type="password" name="number4" maxlength="4">
</div>





Also note that I tidied the on() logic in to a single event handler, and used toggleClass() to amend both classes in a single call.

                        
这篇关于聚焦next / prev输入到达maxlength或退格键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！