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

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

コードをコピーします コードは次のとおりです:

最初に知っておく必要があるのは、イベントを初期化する方法です。基本的なステートメントは次のとおりです:
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)
}
}