入力カーソルの位置情報を取得し、カーソルが左端にあるとき、そのすぐ隣にアイコンを表示する方法

これを実装するためにはカーソルの位置情報を取得、それが左端かどうか判断し、左端だった場合にCSSのpositionを利用してアイコンを表示するという流れになると思っているのですが、カーソルの位置情報を取得する方法と左端か判定する方法を教えていただきたいです。
また、他にも良い方法がありましたらそちらも知りたいです。

ちなみに入力エリアはdivタグにcontenteditable=trueをつけて作成していて、実装後のイメージ画像は以下のような感じです。

わかる方よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

jsFiddleに書いてみました。
もっと楽な書き方はあるかもしれませんが、とりあえず動くと思います。
面倒くさかったのでdivではなくpreを使っているところはご了承ください。

投稿2016/09/21 07:21

htsign

総合スコア870

退会済みユーザー

2016/09/21 23:50

わざわざ作成いただき本当にありがとうございます！！こちら1行に4文字入力すると「isLeft0 : true」となってしまうのですが、なぜなのでしょうか？

htsign

2016/09/22 02:00 編集

それですねー、私の方でも一度再現しまして、リロードしたら直ったので原因不明なのですよ。 # 追記失礼しました。アルファベット入力だと100%再現しますね。ちょっと原因調べてみます。少々お時間ください。

退会済みユーザー

2016/09/22 02:29

なんかすいません。。本当にご丁寧にありがとうございます。

htsign

2016/09/22 03:00

原因が分かりました。 contenteditableな要素内で改行すると、内部の扱いとしては \n (改行コード) ではなく <br> (改行タグ) が挿入されるようです。その為、#editarea の子要素としては、 textnode, <br>, textnode と分断されてしまい、新たに改行された地点で startOffsetが 0 になってしまいます。そこで1行目の「あああ\n」の4文字目を参照してしまって isLeft0 が true になってしまっていました。これを素直に回避する方法が思いつきませんでした。申し訳ないのですが、以下の手順を取ることで改善できる可能性があります。 - #editarea の innerHTML プロパティを参照する - replace(/<br\/?>(?:</br>)?/g, "\n") などで <br>タグを \n に置き換える - #editarea の innerHTML プロパティに設定しなおす - 改めて startOffset を求めるただ、予想ですが、 innerHTML に再代入することでカーソル位置が初期化(=0)されてしまうと思います。もしそうだとすると、その辺を上手くする方法は分かりません。もしかしたらstartOffset以外の方法で取得する道を探るしかないのかもしれません…。

htsign

2016/09/22 03:06

他のWebエディタ実装では contenteditable を用いず、入力自体は透明な<textarea>で行い、同じ文章を<div>などに書いて裏に置くといった手法を取っていたような気がします。もし問題なければそういった手法を真似てみるのもありかもしれません。もしくは改造で済ませるのでもよければ、GitHubのエディタとして採用されているAceEditorがOSSとして公開されている為、それを使うのもありかもしれません。 https://github.com/ajaxorg/ace

退会済みユーザー

2016/09/22 03:23

いろいろと手間のかかることを迅速にしていただき、ありがとうございます！！ contenteditableはなかなかクセがあって扱いにくいのですね。。教えていただいた改善を試して、無理そうならcontenteditableを無理に用いずに進めようかと思います。本当に何から何までありがとうございました。

行動規範の内容に同意します