HOME

テキストエリア日本語入力 ( IME 入力 ) 確定時の処理

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

テキストエリア日本語入力 ( IME 入力 ) 確定時の処理

ウィキペディアより引用
HyperText Markup Language
<blockquote cite="https://ja.wikipedia.org/wiki/HyperText_Markup_Language">
<p>HTMLは木構造(入子構造)のマークアップ言語であり、形式言語である。非常に多くの解説が[1]、「プレーンテキストの文書を要素で括って意味付け」などと説明しているのは間違いである。「タグと、タグで括られたもの、の全体」が「要素」(element)である。タグはタグであって、タグすなわち要素ではない(この誤解もまた、HTML4.0の頃にHTMLの「正しい」説明として、間違った説明が蔓延ったせいである(ビレッジセンター出版局『正しいHTML4.0作法&リファレンス』)など)。HTML風のマークアップ言語の利点と欠点については、HTMLの「先祖」であるSGMLや、HTMLの一般化として派生したXMLの利点と欠点と何ら変わることはなく、ここにあれこれ書いても完全に重複であるので、それらの記事を参照のこと。以下ではWWWというシステムにおける「ハイパーテキスト記述言語」としての側面についてのみに集中する。
</p>
</blockquote>
キャレットの位置 : 0

動作は chrome のみです。

テキストエリアの日本語入力 ( IME 入力 ) 確定判定テスト

日本語入力確定 ( IME 確定 ) :

キーコード :

HTML タグのテキストエリアの日本語入力 ( IME 入力 ) 確定時のイベントを取得して処理を実行するテストです。
以前作成した、このプログラム → { contenteditable 属性を設定した html タグで作成したテキストエディタ }
この、html タグで作成したテキストエディタ では、日本語の文字列に色の設定は出来るのですが、
enter キーを叩いても、リアルタイムに色が反映されません。
日本語入力の後、 enter を二回叩くか、直接入力に切り替えて、文字を打ち込むと、
テキストに色が反映されるという具合で、日本語入力確定時の処理が出来ていません。
作成中、日本語入力の事は、まるで頭になく、気がついたときには、ソースコード中フラグだらけで、
日本語入力確定時の処理を、どこに書いていいのか分からなくなってしまいました。
あとから、処理の追加を試したのですが、各 key イベントでの処理方法にも問題がありました。
その他もろもろ。。

なので、各ブラウザのテキストエリア日本語入力確定時のイベントを確認してみました。
動作確認は、 IE, firefox, chrome の最新版のみです。
firefox は日本語入力中、down, press, upイベントは発生せず、
enter を叩いて入力を確定した時の keyup で値が取得できました。
IE は、日本語入力中、 キーコード の 229 が返ってきます。
直接入力では着火する press イベントが発生しないので、そこで判断するようです。
chrome は IE と同じく、日本語入力中、 キーコード の 229 が返ってきます。
enter を叩いた時の keydown イベント( e.code )で、日本語入力確定の判断が出来ました。

これらを踏まえて、 以前作成したテキストエディタを日本語入力確定で、
テキストに色が反映されるように書き直してみました。
このプログラムが動作するのは、 chrome のみです。
keydown, keypress イベント に登録していた関数を keyup へ移したり、
同じく、出来ていなかったクリップボードの処理も試して見ました。
クリップボード処理は、コピーしたテキストが、タグを含んでいたり、
コピーしたテキストに改行が含まれる場合の改行に使用されている要素の判断がつかず、
中途半端なものになってしまいました。
以前のものは、文字が一文字打ち込まれるたびに、タグの総入れ換えを2回、
今回のものは、1回になりました。

この、プログラムの動作確認は、 chrome ブラウザのみです。(*‘ω‘ *)

contenteditable 属性について → 君はHTML5の contentEditable 属性を知っているか
contenteditable 属性について → HTML の contenteditable 属性

数学の勉強をやり直ししてたりします。_´ω`)_