エレメントを操作する (5/5)
作成:2010-04-02 20:42
更新:2010-05-11 19:07
更新:2010-05-11 19:07
■キーボードのイベントと互換性問題
キーボード関係のイベントも、もちろん用意されています。HTMLの要素では、以下のようなイベント属性が揃っています。
onkeypress――キーをタイプしたとき。
onkeydown――キーを押し下げたとき。
onkeyup――キーを離したとき。
これらのイベントは、「そのときフォーカスを持っている要素」に向けて送られます。例えば、複数の入力フィールドがあった場合、キーをタイプすると、選択されている入力フィールドのタグに用意されたイベント属性の処理が呼ばれるわけです。もし、何も選択されない状態だった場合には、<body>のイベント属性が呼び出されます。
では、簡単な利用例を下のリストに掲載しておきましょう。これは、キーをタイプすると、それがリアルタイムに表示されるというサンプルです。ここでは、<body>のonkeypressにdoActionを設定しています。また、マウスイベントと同様に、発生したイベントのeventオブジェクトを引数に渡し、必要な情報を得るようにしています。
押されたキーに関する情報は、このeventから取得します。が、注意しなければならないのは、「ブラウザによって、用意されているプロパティが違う」という点です。IE系では「keyCode」というプロパティが、それ以外では「charCode」というプロパティが用意されているのです。
これらは、いずれも「押されたキーで表示される文字のコード番号」を示すものです。このコード番号を元に、「String.fromCharCode」というStringオブジェクトのメソッドを使って、そのコード番号の文字を取り出します。後は、それを<div>タグのテキストに追加して表示すればいいわけです。
ここでは、IE系とそれ以外に対応するため、「if (e.charCode != undefined)」というようにして、charCodeの値がundefined（未定義）でなければcharCodeの値を取り出し、それ意外はkeyCodeの値を取り出す、といった変則的な処理をしています。
先に、選択テキストのイベントでも、「IEとそれ以外」で処理を分けました。ここでも、やはり「IEか、そうでないか」による互換性の問題を考えなければいけません。まったく、世の中にIEさえなければ……あー、いや、IEもバージョンが上がるにつれ、次第に独自の方式から、標準的な実装になりつつあります。あと何年か（あるいは十何年か、または何十年か）すれば、こうした問題もきっと解決していることでしょう。えっと、多分。
onkeypress――キーをタイプしたとき。
onkeydown――キーを押し下げたとき。
onkeyup――キーを離したとき。
これらのイベントは、「そのときフォーカスを持っている要素」に向けて送られます。例えば、複数の入力フィールドがあった場合、キーをタイプすると、選択されている入力フィールドのタグに用意されたイベント属性の処理が呼ばれるわけです。もし、何も選択されない状態だった場合には、<body>のイベント属性が呼び出されます。
※利用例
では、簡単な利用例を下のリストに掲載しておきましょう。これは、キーをタイプすると、それがリアルタイムに表示されるというサンプルです。ここでは、<body>のonkeypressにdoActionを設定しています。また、マウスイベントと同様に、発生したイベントのeventオブジェクトを引数に渡し、必要な情報を得るようにしています。
押されたキーに関する情報は、このeventから取得します。が、注意しなければならないのは、「ブラウザによって、用意されているプロパティが違う」という点です。IE系では「keyCode」というプロパティが、それ以外では「charCode」というプロパティが用意されているのです。
これらは、いずれも「押されたキーで表示される文字のコード番号」を示すものです。このコード番号を元に、「String.fromCharCode」というStringオブジェクトのメソッドを使って、そのコード番号の文字を取り出します。後は、それを<div>タグのテキストに追加して表示すればいいわけです。
ここでは、IE系とそれ以外に対応するため、「if (e.charCode != undefined)」というようにして、charCodeの値がundefined（未定義）でなければcharCodeの値を取り出し、それ意外はkeyCodeの値を取り出す、といった変則的な処理をしています。
先に、選択テキストのイベントでも、「IEとそれ以外」で処理を分けました。ここでも、やはり「IEか、そうでないか」による互換性の問題を考えなければいけません。まったく、世の中にIEさえなければ……あー、いや、IEもバージョンが上がるにつれ、次第に独自の方式から、標準的な実装になりつつあります。あと何年か（あるいは十何年か、または何十年か）すれば、こうした問題もきっと解決していることでしょう。えっと、多分。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
<script type="text/javascript">
<!--
function doAction(e){
var num;
if (e.charCode != undefined){
num = e.charCode;
} else {
num = e.keyCode;
}
var div = document.getElementById("target");
var str = div.innerHTML;
div.innerHTML = str + String.fromCharCode(num);
}
//-->
</script>
</head>
<body onkeypress="doAction(event);">
<H1>TEST.</H1>
<div id="target"></div>
</body>
</html>
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る