キャリッジ リターン フォーカスの問題を制御します: コードをコピーします コードは次のとおりです: <br>function submitForm() { <br>if(window.event.keyCode==13) { <br>document.getElementById('btnSearch').focus( ); <br>} <br>} <br>document.onkeydown=submitForm; <br><br> </div>最初に知っておく必要があるのは、イベントを初期化する方法です。基本的なステートメントは次のとおりです: <br> document .onkeydown = keyDown <br> ブラウザがこのステートメントを読み取ると、キーボードのどのキーが押されても、KeyDown() 関数が呼び出されます。 <br> キーボード イベントのキャプチャはブラウザごとに少し難しくなります。さまざまなブラウザの実装ステートメントを個別に学習します。 <br> Netscape <br> Netscape のプログラム実装は IE よりも面倒です。この行のステートメントがないと、キーストローク イベントがマウス プレスのイベントと混同されます。特別なステートメントは次のとおりです。 <br> Document.onkeydown = keyDown <br>if (ns4) document.captureEvents(Event.KEYDOWN) <br> keyDown() 関数には隠し変数があります。通常、文字 " を使用します。 e」を使用してこの関数を表します。 <br> 関数 keyDown(e) <br> 変数 e はキーストローク イベントを表します。次の属性を使用します。 <br> e.that <br> これにより、キーのインデックス値が得られます。インデックス値をキーの英数字値に変換するには、次のように記述します: <br> String.fromCharCode(e.that) <br> 上記のステートメントをまとめると、どのキーが押されたかを知ることができます: <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="86409" class="copybut" id="copybut86409" onclick="doCopy('code86409')">コードをコピー<u></u></a> コードは次のとおりです: </span></div> <div class="codebody" id="code86409"> function keyDown(e) { <br> var keycode = e .that <br> var realkey = String.fromCharCode(e.that) <br>alert("keycode: " keycode " realkey: " realkey) <br>} <br> document.onkeydown = keyDown <br>document.captureEvents (Event.KEYDOWN ) <br><br> </div> Internet Explorer <br> IE のプログラムは Netscape に似ていますが、e.which の代わりに window.event.keyCode を使用してインデックス値を変更します。実際のキー値に変換する方法は String.fromCharCode(event.keyCode) と同様です。プログラムは次のとおりです: <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="64383" class="copybut" id="copybut64383" onclick="doCopy('code64383')">コードをコピー<u></u></a> コードは次のとおりです。</span></div> <div class="codebody" id="code64383"> function keyDown() { <br> var keycode =event.keyCode <br> var realkey = String.fromCharCode(event.keyCode) <br>alert("keycode: " keycode " realkey: " realkey) <br>} <br>document.onkeydown = keyDown <br>document.onkeydown = keyDown <br><br> </div> 両方の手順 <br> チェック上記の例を両方のブラウザで実行すると、実行結果が必ずしも同じではないことがわかります。これは、2 つのブラウザのキーボード コード設定が異なるためで、このプログラムを個別に記述するには別のコードを使用する必要があります。他に方法はありません。 <br> 実際のキーの値を完全に忘れて、キーボード コードの値だけを操作することをお勧めします。 IE を使用している場合は ieKey が有効になり、nKey が 0 に設定されます。Netscape を使用している場合は、nKey が有効になり、nKey が 0 に設定されます。値: <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="3904" class="copybut" id="copybut3904" onclick="doCopy('code3904')"> コードをコピーします。 <u></u></a> コードは次のとおりです: </span></div> <div class="codebody" id="code3904"> 関数keyDown(e) { <br>if (ns4) { <br> var nKey=e.that; <br> var ieKey=0 <br> } <br> if (ie4) { <br> var ieKey=event. keyCode; <br> var nKey=0 <br> } <br> alert("nKey:" nKey " ieKey:" ieKey) <br>} <br>document.onkeydown = keyDown <br>if (ns4) ドキュメント。 CaptureEvents(Event.KEYDOWN) <br> <br> </div> キーボードを使用したオブジェクトの移動 <br> 次のプログラムは、キーボードを使用してオブジェクトの移動を実装します。プログラムは、どのキーが押されたかを確認し、対応する関数を呼び出してオブジェクトを移動します。物体。この例では、文字「A」を押すとオブジェクトが動き始めます。nKey の文字「A」キーの値は 97、ieKey の値は 65 になります。プログラム内で別途確認します。 <br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="85341" class="copybut" id="copybut85341" onclick="doCopy('code85341')">コードをコピー<u></u></a> コードは次のとおりです:</span><div class="codebody" id="code85341"> <br> Function init() { <br> if (ns4) block = document.blockDiv <br> if (ie4) block = blockDiv.style <br> block.xpos = parseInt(block.left) <br>Document.onkeydown = keyDown <br>if (ns4) document.captureEvents(Event.KEYDOWN) <br>} <br>function keyDown(e) { <br>if (ns4) { var nKey=e.that; ieKey=0 } <br> if (ie4) { var ieKey=event.keyCode; var nKey=0 } <br> if (nKey==97 || ieKey==65) { // 「A」キーがpressed <br> slide() <br> } <br>} <br>function slide() { <br> block.xpos = 5 <br> block.left = block.xpos <br> status = block.xpos / / この文はステータスを確認するだけなので必ずしも必要ではありません <br> SetTimeout("slide()",30) <br>} <br> </div> <br> 「Active」変数を追加します <br> 上記プログラムが少し不足していて、オブジェクトが一度動くと止めることができず、さらに数回Aキーを押すとオブジェクトの動きが速くなります。ここで修正します。 <br> 変数「active」を使用してこの状況を変更し、if ステートメントを挿入して関数が繰り返されるかどうかを確認します。 <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="67587" class="copybut" id="copybut67587" onclick="doCopy('code67587')"><u>コードをコピー</u></a></span> コードは次のとおりです。 </div> <div class="codebody" id="code67587"> <br> Function slide() { <br> if (myobj.active) { <br> myobj. > この場合、slide() 関数は myobj.active の値が true の場合にのみ機能し、myobj.active の値が false の場合、オブジェクトは移動を停止します。 <br> onKeyUp 変数と "Active" 変数を使用する <br> onkeyup イベントは、onkeydown イベントと同じように機能します。次のステートメントを使用してイベントを初期化します。 <br><br><br> </div> <br>コードをコピーします。 <br><br><br> コードは次のとおりです。 <div class="codetitle"> <span> <a style="CURSOR: pointer" data="94291" class="copybut" id="copybut94291" onclick="doCopy('code94291')"> document.onkeydown = keyDown <u>document.onkeyup = keyUp </u>if (ns4) document.captureEvents(Event. KEYDOWN | Event.KEYUP) </a></span> </div> keyUp() 関数は同じです。キーが放されると、イベントが発生し、オブジェクトの移動が停止し、アクティブな変数が 0 に設定されます。 🎜><div class="codebody" id="code94291"> <br><br><br>コードをコピー<br> </div> <br> コードは次のとおりです。<br><div class="codetitle"> <span> function keyUp(e) { <a style="CURSOR: pointer" data="14181" class="copybut" id="copybut14181" onclick="doCopy('code14181')"> if (ns4) var nKey = e.that <u>if (ie4) var ieKey = window.event.keyCode </u> if (nKey==97 || ieKey==65) </a> block.active = false </span>} </div> <div class="codebody" id="code14181"> <br> 以下は比較的完成したプログラムです: <br><br><br><br><br>コードをコピー<br> </div> <br> コードは次のとおりです: <br><div class="codetitle"> <span> Function init() { <a style="CURSOR: pointer" data="81069" class="copybut" id="copybut81069" onclick="doCopy('code81069')"> if (ns4) block = document.blockDiv <u> if (ie4) block = blockDiv.style </u> block.xpos = parseInt(block.左）</a> block.active = false </span> document.onkeydown = keyDown </div> document.onkeyup = keyUp <div class="codebody" id="code81069"> if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP) <br>} <br>function keyDown(e) { <br> if (ns4) {var nKey=e.that; var ieKey=0} <br> if (ie4) {var ieKey=event.keyCode; > if ((nKey==97 || ieKey==65) && ! block.active) { // 「A」キーが押された場合 <br> block.active = true slide() <br> } <br>} <br>function keyUp(e) { <br> if (ns4) { var nKey=e.that; var ieKey=0} <br> if (ie4) {var ieKey=event.keyCode; 🎜>if (nKey==97 || ieKey==65) { <br> block.active = false // 「A」キーが離された場合 <br>} <br>} <br>function slide() { <br> if (block.active) { <br> block.xpos = 5 <br> block.left = block.xpos <br> status = block.xpos // 表示のためだけに必要ありません <br> setTimeout("slide ()",30) <br>} <br>} <br> <br> <br> </div> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
