JavaScriptのキーイベント・キーを押し続けた場合のブラウザ毎のイベント差異
2007.03.28 Author: たわばがに
ということで、相も変わらず、JavaScriptネタです。
今回は最近非常に気になっていた、ブラウザ毎に異なるキーイベントに関してです。
何らかの処理でキーボード入力を取りたい場合、
onKeyDown、onKeyPress、onKeyUP
のいずれかを使うと思いますが、普通に押した押してないを判別する程度だったら、
上記のどれを使っても特に影響はないと思います。
しかし、キーをずっと押し続けた状態を取る場合、
ブラウザ毎にかなり挙動が変わってくるので、要注意です。
以下、サンプルスクリプト(JavaScript + HTML)。
<html>
<head>
<script type="text/javascript">
<!--
var down = 0;
var press = 0;
var up = 0;
document.onkeydown =
function () {
document.getElementById("down").innerHTML = ++down;
}
document.onkeypress =
function () {
document.getElementById("press").innerHTML = ++press;
}
document.onkeyup =
function () {
document.getElementById("up").innerHTML = ++up;
}
//-->
</script>
</head>
<body>
down: <span id="down"></span>回;<br>
press: <span id="press"></span>回;<br>
up: <span id="up"></span>回;<br>
</body>
</html>
これを実行すると、以下のような結果になりました。
【Win IE】
キーボードを押し続けている間、keydown、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。
【Win Firefox】
キーボードを押し続けている間、keydown、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。
【Win Opera】
keydownはキーボード押し下げ時に1回だけ発生。
キーボードを押し続けている間、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。
【Mac Safari】
keydownはキーボード押し下げ時に1回だけ発生。
キーボードを押し続けている間、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。
【Mac Firefox】
keydownはキーボード押し下げ時に1回だけ発生。
キーボードを押し続けている間、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。
【Mac IE】
キーボードを押し続けている間、keydown、keypressは連続で発生。
keyupはキーボードを離した際に1回だけ発生。
というように、なかなか複雑です。
Firefoxに関しては、Win版とMac版で動作が異なっています。
OSもちゃんと見ろ、ってことですね。
以上から、キーを押し続けた状態で変化が出てるのは onKeyDown と onKeyPress なので、
OS、ブラウザを判別して処理を適切に切り替えてやれば、動作の差異はなくせます。
以上、微妙にマニアックなJavaScriptネタでした。
