フォロー

textarea内に入力中にScrapboxのように既存のデータのタイトルをサジェストする機能を実現した〜! まだ見た目が残念なので整えたら動画撮るかー。

· · SubwayTooter · 1 · 0 · 0

ダブルブラケットに続いて入力した文字列を含むタイトルをサジェストしてクリックするとリンクを貼れるようにした。
なおサジェスト欄をマウスオーバーで中身も確認できる(ツールチップで表示される)。
便利過ぎて自分で感動している。

キャレット位置のそばに表示するということができればと思ったけど、バニラjsだとなんだかおそろしく面倒くさいので、jQuery導入するよりは別の方法にするかと考えてカーソル位置そばに表示するようにした。

これ、イベントは何を見てるのか気になります。 keydownで、textareaのvalueをチェックしている感じ?

@rashita そうですそうです。keydownごとにtextareaのselectionStartで現在位置を取得して、そこからwhile文で指定した文字(この場合は「[」)か改行文字にぶつかるまで遡って文字をチェックして、遡った回数によって「[」以降に入力されている文字を取得しています。

なるほど!ありがとうございます(自分でも実装してみたくなりました

@rashita 👍👍 「これは素人には無理なポイントかな〜…」とずっと思っていた箇所だったので我ながらすごいレベルアップを感じます笑

ログインして会話に参加
Fedibird

様々な目的に使える、日本の汎用マストドンサーバーです。安定した利用環境と、多数の独自機能を提供しています。