0

Passcoder は、私が作成し、リリースする jquery ライブラリです。入力フィールドを 1 文字の入力ボックスに分割します (iPhone パスコードのように)。ボタンを押すと次の入力にフォーカスするのも特徴の一つ。

問題は、.next('.passcoder')が期待どおりに動作しないことのようです。入力の最初の行 (employee_name 入力) では期待どおりに動作しますが、最初のパスワード入力 (4 番目の従業員名からパスワードまで) に焦点を当てることになっている場合、 は.next('.passcoder')何も返しません。

マークアップ:

<form action="" method="post"
    <h4>Employee Number</h4>
        <input type="text" class="single-character-name passcoder" name="employee_number-0">
        <input type="text" class="single-character-name passcoder" name="employee_number-1">
        <input type="text" class="single-character-name passcoder" name="employee_number-2">
        <input type="text" class="single-character-name passcoder" name="employee_number-3">
    <br>
    <h4>Employee Passcode</h4>
        <input type="password" class="single-character-password passcoder" name="employee_passcode-0">
        <input type="password" class="single-character-password passcoder" name="employee_passcode-1">
        <input type="password" class="single-character-password passcoder" name="employee_passcode-2">
        <input type="password" class="single-character-password passcoder" name="employee_passcode-3">
    <br />
    <br />
        <input class="btn btn-success" type="submit">
        <a class="btn">Cancel</a>
</form>

JavaScript（jQuery）：

$('.passcoder').keyup(function(e){
    if (e.which == 8){
        //backspace
        $(this).prev('input').focus();
    }
    else if(e.which > 47 && e.which < 58){
        $(this).next('.passcoder').focus();
    }
    else{
        $(this).val('');
        return false;
    }
});
4

5 に答える 5

4

prevAllandnextAllをセレクタとともに使用し:firstて、次の要素と前の要素を見つけることができます。

$('.passcoder').keyup(function(e){
    if (e.which == 8){
        //backspace
        $(this).prevAll('input:first').focus();
    }
    else if(e.which > 47 && e.which < 58){
        $(this).nextAll('.passcoder:first').focus();
    }
    else{
        $(this).val('');
        return false;
    }
});

これがhttp://jsfiddle.net/V7SHP/で動作しているのを見ることができます

于 2013-06-28T09:23:51.603 に答える
0

これを試して

$(this).nextAll(".passcoder").eq(0).focus();
于 2013-06-28T09:20:26.797 に答える
0

あなたの問題はテンキーの使用にあると思います。通常の番号を使用してみるか、キーコード 97 から 105 をelse ifブロックに追加してください(e.which > 47 && e.which < 58) || (e.which > 96 && e.which < 106)

$('.passcoder').keyup(function (e) {
    if (e.which == 8) {
        //backspace
        $(this).prev('input').focus();
    } else if ((e.which > 47 && e.which < 58) || (e.which > 96 && e.which < 106)) {
        $(this).next('.passcoder').focus();
    } else {
        $(this).value('');
        return false;
    }
});
于 2013-06-28T09:16:42.623 に答える
0

jQuery.next ドキュメントによると：

一致した要素のセット内の各要素の直後の兄弟を取得します。セレクターが指定されている場合、そのセレクターに一致する場合にのみ、次の兄弟を取得します。

の間にa<br>と aがあるため、メソッドは入力を返しません。<h4>inputnext

于 2013-06-28T09:24:05.590 に答える
0

これを試して

http://jsfiddle.net/mattydsw/DDNbQ/

var next = $(this).next('.passcoder');
if (next.length>0) {
    next.focus();
} else {
    $(this).nextUntil('.passcoder').next('.passcoder').focus();
}
于 2013-06-28T09:24:11.860 に答える