如果变为空,键盘退格键上的jQuery将移至上一个输入字段

时间:2012-12-20 20:22:52

标签: jquery css input focus backspace

我有这个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按键上的上一个文本字段?如果您输入错误,我希望能够删除该字符,但如果再次按退格键,则将焦点移至上一个输入字段。所以基本上如果输入是=''并按下退格键,则移到上一个字段。如果输入有值,并且按下退格键,则视为正常(删除字符)

另外我想知道如果字段中有值,如何添加css类,如果它是空的,则添加另一个css类。

3 个答案:

答案 0 :(得分:6)

尝试:

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

Fiddle

答案 1 :(得分:2)

这是一个解决方案,用于填充一组四个输入,每个输入只包含一个字符,用于竞赛或登录或类似我的,以确认邀请参加会议:

  1. 点击输入时,会选择所有文字。
  2. 输入字符时,光标将转到下一个输入。
  3. 删除时,光标将转到上一个输入。
  4. Form with code inputs for login or contest

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

答案 2 :(得分:1)

试试这个:

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