[英]How do I replace a specific piece of text in a textarea on a keyup event that gets the value of another input box
[英]jQuery - How do I replace the input value on keyup?
如果输入一些数字,然后选择第一个input
并开始输入新数字,则新数字不会替代旧value
。 如何设置代码以遵循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">
我建议使用相同的事件,而不是像这样的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">
这样,您就不必试图更改两个keyup / keydown事件的焦点。
如果您在用户专注于文本时自动在框中选择文本,那么他们接下来输入的内容都将替换其中的内容。 尝试将此事件添加到您的代码中:
$(".code-input").on("focus", function(e) {
$(this).select();
});
或者,您可以在用户对其进行keydown
时自动选择输入,如下所示:
$(".code-input").on("keydown", function(e) {
$(this).select();
if ((e.which == 8 || e.which == 46) && $(this).val() == "") {
$(this)
.prev("input")
.focus();
}
});
试试这个...添加
$('.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.