jQuery при возврате на клавиатуру переходит к предыдущему полю ввода, если становится пустым

У меня есть этот jQuery скрипт:

$(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);
    });
});

См. http://jsfiddle.net/8S2x3/1/.

Хотелось бы немного оптимизировать, но не знаю как.

Большая часть кода копируется, вставляется и изменяется, так как я все еще учусь.

Мой вопрос (ы): Как я могу переместить фокус на предыдущее текстовое поле при нажатии клавиши Backspace? Я хотел бы иметь возможность стереть символ, если вы наберете опечатку, но если вы снова нажмете клавишу Backspace, переместите фокус на предыдущее поле ввода. Таким образом, в основном, если ввод ='' и нажата клавиша Backspace, перейдите к предыдущему полю. Если ввод имеет значение и нажата клавиша Backspace, действовать как обычно (удалить символ)

Также мне интересно, как добавить класс css, если в поле есть значение, а если оно пустое, добавить еще один класс css.


focus input jquery css backspace
person David    schedule 20.12.2012    source источник
comment
Вы уверены, что это хорошая идея с точки зрения доступности? Это звучит как совершенно неожиданное поведение и только запутает пользователя. Некоторые пользователи удерживают клавишу удаления, а не нажимают ее, и я знаю, что остановиться в идеальный момент, чтобы предотвратить удаление предыдущего поля, я бы не смог.   -  person cimmanon    schedule 21.12.2012
comment
Я думаю, все будет в порядке. Поскольку пользователь должен иметь возможность вводить только один символ в поле ввода.   -  person David    schedule 21.12.2012

Ответы (3)


arrow_upward
6
arrow_downward

Пытаться:

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

Скрипка

person Alfero Chingono    schedule 20.12.2012
comment
Событие нажатия клавиши не обнаруживает возврат. - person Hanlet Escaño; 21.12.2012

arrow_upward
2
arrow_downward

Попробуй это:

$(':input').keydown(function(e)
{
    if($(this).val() =='' && e.which ==8)
    {
        alert("Backspace pressed when input empty");
    }        
});
person Hanlet Escaño    schedule 20.12.2012
comment
Это работает. Спасибо, однако я выберу решение @adaptive. У вас нет хорошего скрипта для части css? - person David; 21.12.2012
comment
jsfiddle.net/eliranmal/WumKf может сделать то, что вы ищете, с помощью CSS. - person Hanlet Escaño; 21.12.2012

arrow_upward
2
arrow_downward

Вот решение для заполнения набора из четырех входов, каждый из которых содержит только один символ, для конкурса или входа в систему или, как у меня, для подтверждения приглашения на встречу:

  1. При нажатии на ввод выделяется весь текст.
  2. При вводе символа курсор переходит к следующему вводу.
  3. При удалении курсор переходит к предыдущему вводу.

Форма ввода кода для входа или конкурса

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();
    }
});
person Meloman    schedule 19.03.2017