javascript_javascript スキルのキーボード制御イベントの説明

キャリッジ リターン フォーカスの問題を制御します:

コードをコピーします コードは次のとおりです: function submitForm() { if(window.event.keyCode==13) { document.getElementById('btnSearch').focus( ); } } document.onkeydown=submitForm;

最初に知っておく必要があるのは、イベントを初期化する方法です。基本的なステートメントは次のとおりです: document .onkeydown = keyDown ブラウザがこのステートメントを読み取ると、キーボードのどのキーが押されても、KeyDown() 関数が呼び出されます。 キーボード イベントのキャプチャはブラウザごとに少し難しくなります。さまざまなブラウザの実装ステートメントを個別に学習します。 Netscape Netscape のプログラム実装は IE よりも面倒です。この行のステートメントがないと、キーストローク イベントがマウス プレスのイベントと混同されます。特別なステートメントは次のとおりです。 Document.onkeydown = keyDown if (ns4) document.captureEvents(Event.KEYDOWN) keyDown() 関数には隠し変数があります。通常、文字 " を使用します。 e」を使用してこの関数を表します。 関数 keyDown(e) 変数 e はキーストローク イベントを表します。次の属性を使用します。 e.that これにより、キーのインデックス値が得られます。インデックス値をキーの英数字値に変換するには、次のように記述します: String.fromCharCode(e.that) 上記のステートメントをまとめると、どのキーが押されたかを知ることができます:

コードをコピー コードは次のとおりです: function keyDown(e) { var keycode = e .that var realkey = String.fromCharCode(e.that) alert("keycode: " keycode " realkey: " realkey) } document.onkeydown = keyDown document.captureEvents (Event.KEYDOWN )

Internet Explorer IE のプログラムは Netscape に似ていますが、e.which の代わりに window.event.keyCode を使用してインデックス値を変更します。実際のキー値に変換する方法は String.fromCharCode(event.keyCode) と同様です。プログラムは次のとおりです:

コードをコピー コードは次のとおりです。 function keyDown() { var keycode =event.keyCode var realkey = String.fromCharCode(event.keyCode) alert("keycode: " keycode " realkey: " realkey) } document.onkeydown = keyDown document.onkeydown = keyDown

両方の手順 チェック上記の例を両方のブラウザで実行すると、実行結果が必ずしも同じではないことがわかります。これは、2 つのブラウザのキーボード コード設定が異なるためで、このプログラムを個別に記述するには別のコードを使用する必要があります。他に方法はありません。 実際のキーの値を完全に忘れて、キーボード コードの値だけを操作することをお勧めします。 IE を使用している場合は ieKey が有効になり、nKey が 0 に設定されます。Netscape を使用している場合は、nKey が有効になり、nKey が 0 に設定されます。値:

コードをコピーします。 コードは次のとおりです: 関数keyDown(e) { if (ns4) { var nKey=e.that; var ieKey=0 } if (ie4) { var ieKey=event. keyCode; var nKey=0 } alert("nKey:" nKey " ieKey:" ieKey) } document.onkeydown = keyDown if (ns4) ドキュメント。 CaptureEvents(Event.KEYDOWN)

キーボードを使用したオブジェクトの移動 次のプログラムは、キーボードを使用してオブジェクトの移動を実装します。プログラムは、どのキーが押されたかを確認し、対応する関数を呼び出してオブジェクトを移動します。物体。この例では、文字「A」を押すとオブジェクトが動き始めます。nKey の文字「A」キーの値は 97、ieKey の値は 65 になります。プログラム内で別途確認します。

コードをコピー コードは次のとおりです: Function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.left) Document.onkeydown = keyDown if (ns4) document.captureEvents(Event.KEYDOWN) } function keyDown(e) { if (ns4) { var nKey=e.that; ieKey=0 } if (ie4) { var ieKey=event.keyCode; var nKey=0 } if (nKey==97 || ieKey==65) { // 「A」キーがpressed slide() } } function slide() { block.xpos = 5 block.left = block.xpos status = block.xpos / / この文はステータスを確認するだけなので必ずしも必要ではありません SetTimeout("slide()",30) } 「Active」変数を追加します 上記プログラムが少し不足していて、オブジェクトが一度動くと止めることができず、さらに数回Aキーを押すとオブジェクトの動きが速くなります。ここで修正します。 変数「active」を使用してこの状況を変更し、if ステートメントを挿入して関数が繰り返されるかどうかを確認します。 コードをコピー コードは次のとおりです。 Function slide() { if (myobj.active) { myobj. > この場合、slide() 関数は myobj.active の値が true の場合にのみ機能し、myobj.active の値が false の場合、オブジェクトは移動を停止します。 onKeyUp 変数と "Active" 変数を使用する onkeyup イベントは、onkeydown イベントと同じように機能します。次のステートメントを使用してイベントを初期化します。

コードをコピーします。

コードは次のとおりです。 document.onkeydown = keyDown document.onkeyup = keyUp if (ns4) document.captureEvents(Event. KEYDOWN | Event.KEYUP) keyUp() 関数は同じです。キーが放されると、イベントが発生し、オブジェクトの移動が停止し、アクティブな変数が 0 に設定されます。 🎜>

コードをコピー コードは次のとおりです。 function keyUp(e) { if (ns4) var nKey = e.that if (ie4) var ieKey = window.event.keyCode if (nKey==97 || ieKey==65) block.active = false } 以下は比較的完成したプログラムです:

コードをコピー コードは次のとおりです: Function init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block.左） block.active = false document.onkeydown = keyDown document.onkeyup = keyUp if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP) } function keyDown(e) { if (ns4) {var nKey=e.that; var ieKey=0} if (ie4) {var ieKey=event.keyCode; > if ((nKey==97 || ieKey==65) && ! block.active) { // 「A」キーが押された場合 block.active = true slide() } } function keyUp(e) { if (ns4) { var nKey=e.that; var ieKey=0} if (ie4) {var ieKey=event.keyCode; 🎜>if (nKey==97 || ieKey==65) { block.active = false // 「A」キーが離された場合 } } function slide() { if (block.active) { block.xpos = 5 block.left = block.xpos status = block.xpos // 表示のためだけに必要ありません setTimeout("slide ()",30) } }