jQuery - How do I replace the input value on keyup?

Question

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 . How do I set up the code to follow the keydown function while also replacing the old value with the new one?

 // 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"> 

Answer 1

I would suggest using the same event instead of both keyup and keydown like so:

 // 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.

Answer 2

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:

$(".code-input").on("keydown", function(e) {
     $(this).select();
        if ((e.which == 8 || e.which == 46) && $(this).val() == "") {
          $(this)
            .prev("input")
            .focus();
        }
 });

Answer 3

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">