gpt4 book ai didi

javascript - 将下一个/上一个输入集中在达到最大长度或退格键上

转载 作者:太空狗 更新时间:2023-10-29 15:48:55 27 4
gpt4 key购买 nike

我见过 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").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>

最佳答案

您可以通过在按下退格键时检查当前输入中文本的长度是否为零来实现这一点:

$(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>

另请注意,我将 on() 逻辑整理到单个事件处理程序中,并使用 toggleClass() 在单个调用中修改两个类。

关于javascript - 将下一个/上一个输入集中在达到最大长度或退格键上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35719772/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com