HOME

テキストエリアのキャレットの位置を取得する( javascript )

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

推奨 ブラウザ : chrome

キャレットの位置
focuskeydownkeypresskeyup
0000
キャレットの位置 ( setTimeout 関数で処理 )
focuskeydownkeypresskeyup
0000

onkeypress って、方向キーやバックスペースキーでは
着火しないんです?知らなかった(-_-;)
chrome ブラウザで onfocus が着火した時の値をみてみると、
そのままの処理だと、 0 の値がかえってきますが、
setTimeout 関数で処理を遅らせることで
キャレットの正しい位置の取得が出来ました。
IE や firefox では、正しい位置を取得出来ました。
このあたりは、ブラウザによってばらつきがあるようです。
また、方向キーの上下で onkeypress の値を見てみると、
移動前のキャレットの位置と移動後のキャレットの位置を
onkeypress イベントの着火時に取得出来ることがわかりました。

canvas 要素へテキストデータ出力 2 です。
前回のは、イベントが起こると、すべての文字を再描画していたのですが、
今回のは、書き換えが必要な行だけを書き換えるようにしました。
誤魔化しているところもありますが。。。
プログラムを書いていて気づいたのですが、
canvas の 幅、高さを変更すると、強制的に再描画されてしまうようです。
検索してみると、その旨の注意書きが有りました。\(^o^)/

これだと、今回書いたプログラムは、意味の薄いものになってしまいました。
あと、テキストエリアを透明にしてテキストを選択した所、
chrome ブラウザでは、選択文字列は透明にならない事も分かりました。
透明になると思いこんで、選択文字の色を付ける関数や、
選択文字列をハイライト表示する関数を作ってしまいました。
無駄無駄無駄無駄無駄。。。。

canvas 要素へテキストデータを出力してみました。
テキストエリアのテキスト選択時の始点と終点を取得して、
その結果を canvas 要素へ反映するようにしています。
これも、上のテストと同じで、setTimeout 関数で 1ms 処理を遅らせているところがあります。
setTimeout 関数を使用しないで、
keydown イベント時の、selectionStart,selectionEnd の値を取得すると、
始点と終点が一周遅れた値を返して来るようです。
keydown イベント時にcaretの始点と終点の値を使用して、
処理する場合、setTimeout 関数で処理を遅らせることで、
欲しいキャレットの位置情報を取得できました。

ブログなどで見かける、 html タグのテキストエリアの文字に色をつけて表示する
プログラムを JavaScript で作成したのですがキャレットの位置の取得で躓いたので。

プログラムはこちら → { テキストエリアの文字に色を設定する( javascript ) }

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