2016-07-20 3 views
-1

私は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が検出されたときに強制的にキーアップできるかどうか疑問に思っていました。

+0

あなたを配置してくださいキーアップとキーダウンイベントコードも表示されます。 –

答えて

0

このようなことができますか。しかし、私はあなたの説明についてはわかりません。

$('body').keydown(function (e) { 
    if(e.keyCode==40) { // use your key code instead of Enter Key code 
     //do something 
    } 
    return false; 
}) 
.keyup(function(e) { 
    if(e.keyCode==40) { // use your key code instead of Enter Key code 
     //do something else 
    } 
    return false; 
}); 


$('body').on('keyup', function (e) { 
    if(e.keyCode==40) { // use your key code instead of Enter Key code 
     //do something 
    } 
    // after first keyup set to handle next keydown only once: 
    $(this).one('keydown', function(e) { 
     if(e.keyCode==40) { // use your key code instead of Enter Key code 
      //do something else 
     } 
    }); 
}); 
0

キーアップを書き留めて、キーアップを移動するだけの理由はありますか?つまり、キーダウンイベントがキャプチャされているときに値を収集してから、キーアップイベントが発生すると、カーソルを次の入力に移動します。イベントを発火上のあなたの質問に応じて、しかし

... this answerに基づいて、あなたがこれを行うことができますが:

// Do whatever here to captrure your keydown then 
if ("createEvent" in document) { 
    var el = document.getElementById('textBox'); 
    var e = document.createEvent('HTMLEvents'); 
    e.initEvent('keyup', false, true); 
    el.dispatchEvent(e); 
} 
else{ 
    element.fireEvent("onkeyup"); 
} 

簡単な例:

var el = document.getElementById('textBox'); 
 
el.onkeyup=function(){ 
 
    console.log('KeyUp Caught'); 
 
}; 
 
el.onkeydown=function(){ 
 
    console.log('KeyDown Caught'); 
 
    if ("createEvent" in document) { 
 
     var e = document.createEvent('HTMLEvents'); 
 
     e.initEvent('keyup', false, true); 
 
     el.dispatchEvent(e); 
 
    } else { 
 
     element.fireEvent("onkeyup"); 
 
    } 
 
};
<input id="textBox" type='text'/>

+0

私はちょうどキーアップを移動すると、私は質問に言うようにすぐに書くことができません – R01010010

関連する問題