[英]jQuery - How do I replace the input value on keyup?
If I enter some numbers and then select the first input
and start typing new numbers, the new number doesn't replace the old value
. 如果输入一些数字,然后选择第一个
input
并开始输入新数字,则新数字不会替代旧value
。 How do I set up the code to follow the keydown
function while also replacing the old value with the new one? 如何设置代码以遵循
keydown
功能,同时又用新值替换旧值?
// jQuery $(".code-input").on("keyup", function() { if ($(this).val()) { $(this) .next() .focus(); } }); $(".code-input").on("keydown", function(e) { if ((e.which == 8 || e.which == 46) && $(this).val() == "") { $(this) .prev("input") .focus(); } }); $(".code-input").on("paste", function(e) { e.preventDefault(); var text = e.originalEvent.clipboardData.getData("text"); var textArray = text.split(""); $(".code-input").each(function(index, element) { $(element).val(textArray[index]); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="code-input" maxlength="1" name="verifyCode1"> <input type="text" class="code-input" maxlength="1" name="verifyCode2"> <input type="text" class="code-input" maxlength="1" name="verifyCode3"> <input type="text" class="code-input" maxlength="1" name="verifyCode4"> <input type="text" class="code-input" maxlength="1" name="verifyCode5"> <input type="text" class="code-input" maxlength="1" name="verifyCode6">
I would suggest using the same event instead of both keyup and keydown like so: 我建议使用相同的事件,而不是像这样的keyup和keydown:
// jQuery $(".code-input").on("keyup", function(e) { if ((e.which == 8 || e.which == 46) && $(this).val() == "") { $(this) .prev("input") .select(); } else if ($(this).val()) { $(this) .next() .select(); } }); $(".code-input").on("paste", function(e) { e.preventDefault(); var text = e.originalEvent.clipboardData.getData("text"); var textArray = text.split(""); $(".code-input").each(function(index, element) { $(element).val(textArray[index]); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="code-input" maxlength="1" name="verifyCode1"> <input type="text" class="code-input" maxlength="1" name="verifyCode2"> <input type="text" class="code-input" maxlength="1" name="verifyCode3"> <input type="text" class="code-input" maxlength="1" name="verifyCode4"> <input type="text" class="code-input" maxlength="1" name="verifyCode5"> <input type="text" class="code-input" maxlength="1" name="verifyCode6">
That way, you're not fighting with trying to change focus for both keyup/keydown events. 这样,您就不必试图更改两个keyup / keydown事件的焦点。
If you automagically select the text in the boxes when the user focuses on it, whatever they type next will replace what's there. 如果您在用户专注于文本时自动在框中选择文本,那么他们接下来输入的内容都将替换其中的内容。 Try adding this event to your code:
尝试将此事件添加到您的代码中:
$(".code-input").on("focus", function(e) {
$(this).select();
});
Alternatively, you could just automatically select the input when the user does a keydown
on it, like so: 或者,您可以在用户对其进行
keydown
时自动选择输入,如下所示:
$(".code-input").on("keydown", function(e) {
$(this).select();
if ((e.which == 8 || e.which == 46) && $(this).val() == "") {
$(this)
.prev("input")
.focus();
}
});
Try this ... add 试试这个...添加
$('.code-input').focus(
function(){
$(this).val('');
});
$(".code-input").on("keyup", function() { if ($(this).val()) { $(this) .next() .focus(); } }); $(".code-input").on("keydown", function(e) { if ((e.which == 8 || e.which == 46) && $(this).val() == "") { $(this) .prev("input") .focus(); } }); $(".code-input").on("paste", function(e) { e.preventDefault(); var text = e.originalEvent.clipboardData.getData("text"); var textArray = text.split(""); $(".code-input").each(function(index, element) { $(element).val(textArray[index]); }); }); $('.code-input').focus( function(){ $(this).val(''); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" class="code-input" maxlength="1" name="verifyCode1"> <input type="text" class="code-input" maxlength="1" name="verifyCode2"> <input type="text" class="code-input" maxlength="1" name="verifyCode3"> <input type="text" class="code-input" maxlength="1" name="verifyCode4"> <input type="text" class="code-input" maxlength="1" name="verifyCode5"> <input type="text" class="code-input" maxlength="1" name="verifyCode6">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.