ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript で IME キーボード入力イベントをリッスンする_javascript のヒント

JavaScript で IME キーボード入力イベントをリッスンする_javascript のヒント

WBOY
リリース: 2016-05-16 18:06:19
オリジナル
1271 人が閲覧しました

入力メソッドはキーボード イベントをどのようにトリガーする必要がありますか?イベントはキーストロークごとにトリガーされますか、それとも単語の選択が完了した後にのみイベントがトリガーされますか?文全体の入力がイベントをトリガーするにはどうすればよいでしょうか?これについては、オペレーティング システムやブラウザによって見解が異なります。最悪の場合、ブラウザはユーザーが入力メソッドを使用した後に 1 回だけキーダウンをトリガーし、その後はキーボード イベントが発生しません。これは、提案コントロールの実装にとって大きな問題です。提案コントロールはテキスト入力ボックスの変更を監視する必要があり、ポーリングが使用される場合はイベントが最も正確で計算効率の高い方法であるためです。
まず、入力メソッドを有効にした後にキーストローク イベントを監視するには、キーダウン イベントを使用する必要があります。これは、入力メソッドが有効になった後は他のキーボード イベントがトリガーされない可能性があるためです。次に、ほとんどのオペレーティング システムとブラウザは事実上の標準を実装しています。つまり、ユーザーが入力メソッドを使用して入力する場合、keydown イベントで渡される keyCode 値は 229 です。ただし、キーダウンをトリガーする頻度は不確実で、キーストロークごとにイベントがトリガーされる場合もあれば、単語の選択が完了した後でのみイベントがトリガーされる場合もあります。現時点でも、テキスト ボックスの内容の変更をリアルタイムで監視したい場合は、ポーリングを使用する必要があります。

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

var timer; 229;
function keydownHandler (e) {
clearInterval(timer)
if (e.keyCode == imeKey) {
timer = setInterval(checkTextValue, 50); else {
checkTextValue ();
}
}
function checkTextValue() {
/* 入力テキストの変更を処理します */
}


Opera は楽しいですブラウザ 他の人がやっているようなことは何もせず、他の人がやらないことをするのが好きです。たとえば、事実上の標準である keyCode == 229 はサポートされていませんが、keyCode == 197 を使用して入力メソッドの使用を示します。したがって、Opera ブラウザが検出された場合は、比較用の keyCode 定数を変更する必要があります。
var imeKey = (UA.Opera == 0) ? 229 : 197;
最後に、Firefox for Mac というさらに評価の低いブラウザがあります。 Mac バージョンは Mozilla にとってあまりにも重要ではないと推定されているため、多くの Windows バージョンには問題がないのに、Mac バージョンには上記のイベントのサポートなどの小さな問題が発生する可能性があります。 Mac 版 Firefox には keyCode == 229 がなく、入力メソッドが有効になった後の最初のキーストロークのみが keydown イベントをトリガーするため、ポーリングはキーストロークの後にのみ使用できます。
if (e.keyCode == imeKey || UA.Firefox > 0 && UA.OS == 'Macintosh') {
これら 2 つの改善を追加した後、テキスト ボックスの変更をリアルタイムで監視できなくなりましたこの問題は、ユーザーが入力方式を有効にしている場合でも発生します。完全なコードは次のとおりです:


コードをコピーします コードは次のとおりです:
varタイマー;
var imeKey = (UA.Opera == 0) ? 229 : 197;
function keydownHandler (e) {
clearInterval(timer)
if (e.keyCode == imeKey || UA.Firefox > 0 && UA.OS == 'Macintosh') {
timer = setInterval(checkTextValue, 50)
} else {
checkTextValue();
function checkTextValue() {
/* 入力テキストの変更を処理します */
}

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート