Facebookみたいにtextareaの一部を強調する - Qiita

Facebookで人物を補完すると、その人物名の周りに枠が表示されて強調されますよね（gif画像参照）。 これのやり方を解説します。 TL;DR textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ textareaの中にDOMを入れても表示されない パッと考えるとtextareaの中にDOMツリーを入れるとそれが表示されるんじゃないか、と思うかも知れません が、ぜんぜんそんなことは無くて、そのまま文字列が表示されてしまいます。 ご存知のようにtextareaやinputは、他の要素のように子要素を表示するのではなく、自身のvalue属性の値を画面に表示する働きをします。value属性は文字列を格納するためのものなのでDOMを入れられないわけですね。 強調用のDOMを重ねあわせる textareaにはDOMをそのまま入れられないので、仕方がなく周り

[gfx]

これ、textarea APIを強化して簡単にできるようになってほしい

[tohokuaiki]

githubのデモ見てようやく理解。overlayのcolor:transparent;white-space:pre-wrapとtextaareaのbg-color:transparentが肝ね。最初に考えた人、天才。

[uzuki-first]

へえええええ！あれって背景だったのか！！

[june29]

なるほどすごい、だけど、こういうのもっと簡単にできるようになってほしい。

[hi-hats]

手が込んどる

[ebo-c]

背後でcanvasでの空文字送りみたいなことしてるのか

[igrep]

“textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ”

[potato777]

textareaの背景を透過して裏で色付ける。

[takahashitakashi]

これ、地味にいいなぁ

[taka222]

”JavaScript - Facebookみたいにtextareaの一部を強調する - Qiita [キータ]”

[poppun1940]

Facebookで人物を補完すると、その人物名の周りに枠が表示されて強調されますよね（gif画像参照）。 これのやり方を解説します。 TL;DR textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ textarea

[b4takashi]

気付かなかった、あれ背景なのか

[hylom]

これ、不思議に思ってたのだがこんな原理だったのか。目から鱗。

[todesking]

ナルホディウス

[UDONCHAN]

便利

[yaotti]

透明にして後ろにテキストを配置してるのか．面白い