jQuery on keyboard backspace move to previous input field if becomes empty

Question

I have this jQuery script:

$(document).ready(function() {
    //Focus the first field on page load
    $(':input:enabled:visible:first').focus();
    //Clear all fields on page load
    $(':input').each(function() {
        this.value = "";
    });
});
//Clear field on focus
$('input').focus(function() {
    this.value = "";
});
//Allow only alphabetical characters in the fields
$(':input').bind("keypress", function(event) {
    if (event.charCode != 0) {
        var regex = new RegExp("^[a-zA-Z]+$");
        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
        $(this).next('input').focus();
    }
});
//Enumerate submit click on [ENTER]-keypress
$(':input').keypress(function(e) {
    if (e.which == 13) {
        jQuery(this).blur();
        jQuery('#submit').click();
    }
});
//Submit form
$('#submit').click(function() {
    //Show loading image while script is running
    $("#response").html("<img src='../images/loader.gif'>");

    //POST fields as array
    function serealizeInputs(input) {
        var array = [];
        input.each(function() {
            array.push($(this).val())
        });
        return array;
    }

    var letters = serealizeInputs($('.letters'));

    $.post('loadwords.php', {
        letters: letters
    }, function(data) {
        //Show the resonse from loadwords.php
        $("#response").html(data);
    });
});

See http://jsfiddle.net/8S2x3/1/

I would like to optimze it a little but I don't know how.

Most of the code is copy-paste-modify since i'm still learning

My question(s): How can I move focus to previous textfield on Backspace keypress? I would like to be able to erase the character if you mistype, but if you press backspace again move focus to previous input field. So basically if input is ='' and backspace is pressed, move to previous field. If input has value, and backspace is pressed, act as normal (erase the character)

Also I wonder how to add css class if the field has value in it, and if it's empty add another css class.

Are you sure this is a good idea from an accessibility standpoint? This sounds like completely unexpected behavior and would only serve to confuse the user. Some users hold down the delete key rather than tap it, and stopping at the perfect moment to prevent deleting a preceding field is something I know I would be incapable of. — cimmanon, Dec 20 '12 at 20:34
I think it will be OK. Since the user should only be able to enter one character per input field. — David, Dec 20 '12 at 20:36

Alfero Chingono · Accepted Answer · 2012-12-20T20:39:25.733

6

Try:

$(':input').keydown(function(e) {
    if ((e.which == 8 || e.which == 46) && $(this).val() =='') {
        $(this).prev('input').focus();
    }
});

Fiddle

edited Dec 20 '12 at 20:39

answered Dec 20 '12 at 20:34

Alfero Chingono

2,663
3
33
54

The keypress event does not detect backspace. – Hanlet Escaño Dec 20 '12 at 20:36

score 2 · Answer 2 · answered Dec 20 '12 at 20:35

2

Try this:

$(':input').keydown(function(e)
{
    if($(this).val() =='' && e.which ==8)
    {
        alert("Backspace pressed when input empty");
    }        
});

answered Dec 20 '12 at 20:35

Hanlet Escaño

17,114
8
52
75

1

This works. Thank you, however I will go with @adaptive's solution. You don't have any good script for the css part? – David Dec 20 '12 at 20:44
http://jsfiddle.net/eliranmal/WumKf/ might do what you are looking for with the css. – Hanlet Escaño Dec 20 '12 at 21:24

score 2 · Answer 3 · answered Mar 19 '17 at 20:06

Here is a solution to fill a set of four inputs with each one containing only one character, for contest or login or like mine, to confirm invite for a meeting :

When clicking in the input, all text is selected.
When entering a char, the cursor goes to next input.
When deleting, the cursor goes to previous input.

HTML :

<div class="code">
    <input type="text" name="code1" maxlength="1" />
    <input type="text" name="code2" maxlength="1" />
    <input type="text" name="code3" maxlength="1" />
    <input type="text" name="code4" maxlength="1" />
</div>

jQuery :

$(":input").on("focus",function(e){
    $(this).select();
});
$(":input").on("mouseup",function(e){
    $(this).select();
    return false;
});
$(':input').keyup(function(e) {
    if (e.which == 8 || e.which == 46) {
        $(this).prev('input').focus();
    }
    else {
        $(this).next('input').focus();
    }
});

jQuery on keyboard backspace move to previous input field if becomes empty

3 Answers3