libro
www.tuyano.com
初心者のためのJavaScriptプログラミング入門

エレメントを操作する (5/5)

作成:2010-04-02 20:42
更新: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もバージョンが上がるにつれ、次第に独自の方式から、標準的な実装になりつつあります。あと何年か（あるいは十何年か、または何十年か）すれば、こうした問題もきっと解決していることでしょう。えっと、多分。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

*program list*
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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プログラミング入門」に戻る