入力がkeydownイベントリスナーとデバッグモードのときに文字が入力されない

Question

keydownイベントリスナーで入力があります。私はjavascript/htmlの新機能なので、明らかにそうだが、ブラウザで試してみるとすべてのことが機能する。私は文字を入力して、私は私のjavascriptが実行され、私は別の文字を入力し、それが動作することを見ることができます。しかし、クローム開発ツールを開いて、イベントリスナー関数にブレークポイントを設定すると、何かを入力すると、イベントリスナーの実行が終了した後に入力要素に表示されません。これの理由は何ですか？ここで

は私のjavascriptです：

$("#author").keydown(function(event) { 

}); 

、ここでは、html要素である：

<input class="form-control" name="author" type="text" id="author"> 

だから、もう一度それを試してみて、説明する：私は、文字（例えば "M"）を入力すると入力要素では、文字「m」が入力要素に現れます。別の文字を入力すると、その文字も表示されます。その後、私はページをリフレッシュします。クローム開発ツールを開き、イベントリスナーにブレークポイントを設定します。キーボード "m"を入力すると、空のイベントリスナーが実行され、ページに "m"と入力しても意味がありません。入力要素に表示されません。デバッグポイントを削除すると動作します。私は文字を入力し、それは入力要素に現れます。

Hereはjsfiddleの例です。入力ボックスに入力すると動作します。開発ツールを（少なくともchromeでは）開いたら、jsインタプリタを入力して続行します。何も入力されません。手紙の基本的なタイピングで

Answer 1

、あなたがテキストフィールドに文字「M」と入力した場合ので

を（あなたが聴きたいものをあなたが決めることができます）、実際に火いくつかのイベントがあります

1. のKeyDown
2. キー押下
3. keyUpイベント

012：実際には次の順序で、いくつかのイベントを発生

キーを押し続けると、「ダウン」および「プレス」イベントが繰り返し発生します。

$("#author").keydown(function(event){ 
 
    var key = event.keyCode || event.charCode; 
 
\t $('#events').append('keydown: ' + key + '<br/>'); 
 
}); 
 
$("#author").keyup(function(event){ 
 
    var key = event.keyCode || event.charCode; 
 
\t $('#events').append('keyup: ' + key + ' value:' + $("#author").val() + '<br/><hr/>'); 
 
}); 
 
$("#author").keypress(function(event){ 
 
\t $('#events').append('keypress: value:' + $("#author").val() + '<br/>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="form-control" name="author" type="text" id="author"> 
 
<div id="events"></div>

トリックはオープンデバッグツールなしで、あなたがフィールドに入力した値を参照してくださいものの、それは本当にキープレスイベントが発生するまで、入力されていないこと、です。しかし、ブレークポイントが設定されている場合、またはkeydownイベントから "戻る"ことがない場合、プレスは決して起こらず、フィールドは追加された文字を含むように更新されません。