カテゴリー
JavaScript

テキストイベント

ブラウザには、キーボード入力に関して、レガシーなイベントが3種類ある

keydown、keyupイベント 低レベルイベント

keypressイベント 高レベルイベント 印字可能な文字が生成されたことを通知する

DOM Level 3 Eventではもっと一般的な textinputイベントが定義されている

入力方法にかかわらず、ユーザがテキストを入力したときに、このイベントが発生する

Webkitブラウザでは、非常によく似た textInputイベントがサポートされている

textinput、textInputイベントでは、detaプロパティを持つ単純なイベントオブジェクトが渡される。

この、detaプロパティには、入力されたテキストが格納されている。

キーボード入力の場合は、detaプロパティに1文字だけ格納される。 しかし、他の入力方法の場合は、複数の文字が格納されているのが普通。

keypressイベントで渡されるイベントオブジェクトはもっと複雑 keypressイベントは1文字入力を表す。

イベントオブジェクトでは、この文字をUnicodeの符号位置(数値)で表す。

そして、String.fromCharCode()を使えば文字列に変換できる。

多くのブラウザでは、イベントオブジェクトのkeyCodeプロパティに、入力文字の符号位置が格納される。

しかし、Firefoxでは、charCodeを使う。

多くのブラウザでは、印字可能文字列が入力されたときだけ、keypressイベントが発生する。

しかし、Firefoxでは、非印字可能文字に対しても、keypressイベントが発生する。 このような場合を識別して、非印字可能文字を無視できるようにするには、 イベントオブジェクトのcharCodeプロパティの値が0かどうかを調べる

textinput、textInput、keypressイベントをキャンセルすることで、文字入力を抑止できる。

つまり、これらのイベントを使うことで、入力をフィルタできる。

textinput、keypressイベントは、新たに入力されたテキストが、 フォーカスのあるドキュメント要素に挿入される前に発生する。

したがって、これらのイベントのイベントハンドラでイベントをキャンセルすれば、テキストの挿入を抑止できる。

また、ブラウザは、テキストが要素に挿入された後に発生するinputイベントタイプも実装している。

このイベントはキャンセルできない。また、イベントオブジェクト中には新しいテキストは含まれない。

要素のコンテンツテキストが何らかの方法で変更されたことだけを通知する。

参考書籍:

オライリー JavaScript 第6版

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です