日進月歩でどんどん進化するJavascriptですが、ESやらTSやら頭がパルプンテな人もいるかもしれませんが、遊び感覚で技術との追いかけっこができる人の未来は明るいんじゃないでしょうか？
そんなJavascriptのイベントで、「composition」をつい先日理解できたので、忘れないようにブログに備忘録しておきたいと思います。
ちなみに、いつもこうして備忘録しているのは、忘れないようにというのと同時に、この先自分が仕事で使う時に、簡単にコピペできるようにするためという横着思考でもあります。
あと、当たり前な事なんですが、こうした復習した内容は、一過性ではなく、深い記憶に蓄積されるので、これもやっぱり自分のためなんですね。
でも、合わせて他の人もこのブログを見て、理解したり、楽しんだり、気がつくことがあると、一度に三度も四度も
オイシイという状態なんです。
我ながらいい活動していると思いますよ。
たまに、「参考になりました」というコメントをもらいますが、そうした時に、至福の喜びもえられるという、五度目のうまみもあります。
compositionイベント
IMEなどのテキスト変換システムが新しい変換セッションを開始したり終了した時に発火するイベントです。
要するに、パソコンなどで入力文字を漢字などに変換する時の挙動の時のイベントです。
このイベントは必須なのかというと、実はさほど使用頻度は高くありません。
ただ、今回とあるシステムを作っていた時に、文字入力の挙動で不具合が発生して、それを回避するために使いました。
ハッキリ言って、それまでこのイベントのことすら知りませんでしたwww。
知らないことは、知っておいた方がいいに決まっているので、このイベントを深掘りしておきたいと思います。
イベントの技術仕様
cimpositionイベントは、次の3つの発火ポイントから成り立ちます。
compositionstart : IMEの開始（変換開始）
compositionend : IMEの終了（変換終了、確定）
compositionupdate : IMEのセッションが更新された時に発火（変換途中の文字）
サンプルコード
index.html
<h1>CompositionStart</h1>
<input id="compositionstart" type="text" />
<p class="output"></p>
<script>
const elm = document.getElementById("compositionstart")
elm.addEventListener("compositionstart", handle_start)
elm.addEventListener("compositionend", handle_end)
elm.addEventListener("compositionupdate", handle_update)
function handle_start(e){
const p = document.querySelector(`p.output`)
const value = `start : ${e.type} : ${e.data}\n`
p.textContent += value
}
function handle_end(e){
const p = document.querySelector(`p.output`)
const value = `end : ${e.type} : ${e.data}\n`
p.textContent += value
}
function handle_update(e){
const p = document.querySelector(`p.output`)
const value = `update : ${e.type} : ${e.data}\n`
p.textContent += value
}
</script>
<style>
p.output{
height:200px;
overflow:hidden scroll;
border:1px solid black;
padding:0.5em;
white-space:pre-wrap;
resize:vertical;
}
</style>
デモ
使用する場面
compositionイベントは、IMEを使う時にしか使わないので、自ずと、input type="text" タグや、textareaぐらいでしか使わないでしょう。
あと、contenteditable="true" 属性のついたタグでも使えるので、今現在は、この3パターンの場面で使うことができるイベントですね。
※contenteditableがわからない人は、下記ページを参照してください。
HTMLのcontenteditable属性って一体どういう時に使うの？
今回起きたトラブルについて
個人的に、仕事で使った場面について解説すると、
contenteditable属性タグで、tableタグ内のtdセルの内容を編輯することができるという、とあるシステムの管理ページを作っていた時に、
入力文字が、ダブって登録されてしまうという不具合を見つけたので、その時に、compositionstartで任意のフラグを有効にして、compositionendで無効にする処理で、IMEの挙動制御をしたという内容です。
このイベントのおかげで簡単に制御することができたので、とりあえず深掘りも含めて覚えておくことが必要なイベントとして自己認識しました。
あとがき
名前などの入力で、漢字登録されたものを、ひらがなで解釈する場合に、変換途中のひらがななどを取得することができるので、完璧ではないですが、ある程度の予測ふりがな登録機能ができるんじゃないかな〜と思いました。
まだ必要に迫られていないので、実際にこの機能は作ってないですが、EFOや、ユーザー登録などで使う場面は想像できるので、自己ライブラリとして作っておきたいと思います。
できたら、またブログで公開しますね。
0 件のコメント:
コメントを投稿