私は5つの入力を持っています。それらの誰もが手紙を待つでしょう。一度手紙でいっぱいになると、自動的に次の入力にジャンプする必要があります。キーダウン後に強制的にキーアップする
問題は、私がkeyup
だけをキャプチャすれば、これは私が正しくジャンプすることができますが、私は "すぐに"書くことはできません。
例えば者は、私は言葉「ミーガン」を書かなければならないので、私はm
で始まるが、私は(からkeyup)m
キーを離す前に、私はe
を押した場合、私は奇妙な動作を取得しましょう。
この
はHTML<form>
<div class="code-cell"><input id="code-1" tabindex="1" class="code-input" type="text" data-isvalid="false" /></div>
<div class="code-cell"><input id="code-2" tabindex="2" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div>
<div class="code-cell"><input id="code-3" tabindex="3" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div>
<div class="code-cell"><input id="code-4" tabindex="4" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div>
<div class="code-cell"><input id="code-5" tabindex="5" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div>
</form>
でこれを行う
var goTo = function (curIndex, nextIndex, e) {
// Backwards
if ((curIndex > codeMinLength) && (nextIndex < curIndex)) {
if (nextIndex < 5 && $('#code-' + curIndex).val() === '') {
$('#code-' + nextIndex).focus();
}
$('#code-' + curIndex).val('');
}
// Foreward
if ((curIndex < codeMaxLength) && (nextIndex > curIndex)) {
if ($('#code-' + curIndex).val().trim().length > 0) {
// Force the keyup of the previous pressed key not yet released
$('#code-' + nextIndex).focus();
}
}
};
var eventToCapture = (window._PFN.isMobile) ? 'keyup' : 'keydown';
$('.code-input').on(eventToCapture, function (e) {
var $input = $(e.target);
var keyCode = e.keyCode || e.which;
curIndex = parseInt($input.attr('tabindex'));
nextIndex = null;
if(e.keyCode === 13) {
return validateCode();
}
if (keyCode === 8) { // Backspace
nextIndex = curIndex - 1;
} else {
nextIndex = curIndex + 1;
}
//$('.code-input').on('keyup', function(e){
goTo(curIndex, nextIndex, e);
//});
});
は私はすぐに書いてみましょう(イベントをキャプチャ)javascriptのですが、私は次へとスムーズにジャンプすることはできません。入力。
keydownが検出されたときに強制的にキーアップできるかどうか疑問に思っていました。
あなたを配置してくださいキーアップとキーダウンイベントコードも表示されます。 –