GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 - Qiita

続編 JavaScript - Qiitaのtextarea自動補完がOSSになりました GitHubのコメントでは@と入力するとカーソルの下に入力補完が出現する。さらっとやっているが、実はこれが結構難しい。なぜ難しいのかというと、JavaScriptではカーソルが何文字目にいるかは分かるが、 カーソルのXY座標を取得するAPIが存在しない からだ。カーソル位置が分からなければ、適切な位置に補完候補を表示することができない。では一体どうすればいいのか？ 今回Qiitaではコメント欄でのメンションの補完機能を実装した。本稿では前述の問題を解決するために用いたテクニックを解説する。 ちなみにこのメンション補完機能はチーム用プライベートQiitaである「Qiita:Team」でも勿論使える。現在絶賛無料トライアル実施中なので、興味を持たれた方はそちらも使ってみて欲しい。 要約 textarea内

[tanupig]

カーソル xy座標

[tofu-kun]

“showHint.js”

[jshimazu]

キャレット位置

[armorik83]

Qiitaの中の人エディタの知見めちゃ強そう

[kasumani]

GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 GitHubのコメントでは@と入力するとカーソルの下に入力補完が出現する。さらっとやっているが、実はこれが結構難しい。なぜ難しいのかというと、JavaScriptで

[shgam]

“カーソルの下に補完メニューを表示するには、カーソルのXY座標が分からなければならない。だが、冒頭でも述べたようにJavaScriptにはカーソルのXY座標を取得するAPIが存在しない。”

[amberjack115]

便利だけど面倒くさいな

[hisasann]

selectionStart

[efcl]

Githubみたいなユーザー名補完

[Naruhodius]

ナルホディウス

[todesking]

ナルホディウス

[megamak]

参考になる。

[karihei]

キャレットのXY座標を計算する

[maraigue]

"GitHubのコメントでは@と入力するとカーソルの下に入力補完が出現する(中略)なぜ難しいのかというと、JavaScriptではカーソルが何文字目にいるかは分かるが、 カーソルのXY座標を取得するAPIが存在しないからだ"

[mattn]

こういうのはjQueryプラグインとかに任せたい

[htsign]

スタイルを完コピしたdivを作ってtextareaでのカーソルの位置座標を取得するTips

[sho]

ゲロゲロにめんどくさいw

[griefworker]

Qiitaによるコメント欄のメンション機能実装方法の解説。

[uk-ar]

textarea内でのカーソル位置を計算するには... ダミーのdiv要素を画面外に作り、textarea要素のスタイルを模倣する 先頭からカーソルまでの文字列をコピーし、div要素に挿入する 末尾にspan要素を追加し、そのspan要素のdiv要素内

[rryu]

選択範囲としてのカーソル位値ではなく座標としての位置の取得方法。なかなか涙ぐましい感じ。

[tuki0918]

UX

[mathemathiko]

役に立ちそう。

[yohshiy]

textarea内でのカーソルの相対位置を計算する方法

[camelmasa]

これ凄い。