1. yuku_t

    Posted

    yuku_t
Changes in title
+Facebookみたいにtextareaの一部を強調する
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,66 @@
+![bx07r4swyI.gif](https://qiita-image-store.s3.amazonaws.com/0/153/b261207b-1434-b589-1e49-1a0cf4eac20f.gif)
+
+Facebookで人物を補完すると、その人物名の周りに枠が表示されて強調されますよね(gif画像参照)。
+
+これのやり方を解説します。
+
+# TL;DR
+
+textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ
+
+---
+
+# textareaの中にDOMを入れても表示されない
+
+パッと考えるとtextareaの中にDOMツリーを入れるとそれが表示されるんじゃないか、と思うかも知れません
+
+```html:textareaの中に直接DOMを記述してみる
+<textarea><span>1</span></textarea>
+```
+
+が、ぜんぜんそんなことは無くて、そのまま文字列が表示されてしまいます。
+
+![Screen Shot 2013-09-25 at 1.59.57 PM.png](https://qiita-image-store.s3.amazonaws.com/0/153/0d1b54c9-2231-7891-0529-a6ebda72b7c0.png)
+
+ご存知のようにtextareaやinputは、他の要素のように子要素を表示するのではなく、自身のvalue属性の値を画面に表示する働きをします。value属性は文字列を格納するためのものなのでDOMを入れられないわけですね。
+
+# 強調用のDOMを重ねあわせる
+
+textareaにはDOMをそのまま入れられないので、仕方がなく周りに設置したDOMの位置を微調整して重ねあわせることでtextareaが強調されているかのように見せかけているわけです。
+
+このとき問題になるのがtextareaと重ねあわせるDOMのz軸方向の位置関係です。textareaより手前にあるとtextareaを選択できなくなってしまします。一方でtextareaより奥にあると表示されません。
+
+さてどうしたら良いのでしょう?
+
+## background-color: transparentが肝
+
+textareaの背景色を透明にして、後ろにあるDOMが表示されるようにすればよさそうですね。つまりtextareaが `background-color: transparent;` であればよいわけです。はい、これで完了です。
+
+## サンプル
+
+で、試しに作ってみました。
+
+- http://yuku-t.com/jquery-overlay/
+
+このプラグインは正規表現で指定された文字列に背景色を付けるシンプルなものです。
+
+非常にシンプルなので、先日公開したtextareaに補完機能をつけるプラグインとも簡単に結合することが可能です。プラガブル万歳\(^o^)/
+
+- http://yuku-t.com/jquery-textcomplete/#textarea3
+
+![kw1I6VWtpY.gif](https://qiita-image-store.s3.amazonaws.com/0/153/ce070838-0c10-91d4-19aa-e8396b2bcd40.gif)
+
+# textareaを使うと背景色を変えるくらいしか強調手段がない
+
+上記のサンプルページを表示してみた人は気がついたかも知れませんが、背景色を付ける以外の強調方法を使えません。例えば文字の色を変えたり、イタリックにしたり、太さを変えたり、大きさを変えたりしたくてもできないのです。
+
+理由はtextareaを使っていることです。あくまでも表示されている文字列はtextarea由来のものであり、こいつらの一部の色を変えたり、イタリックにしたりすることができないのは最初に見た通りです(てか、それができるならこんな回りくどいことをしなくてもいいわけで)。
+
+## contentEditableを使えばなんとかなる?
+
+contentEditableは使えないのか?と思う向きもあるかと思います。たしかにその通りでcontentEditableを使うこともできるかも知れません。こちらを使えば文字列の大きさも好き勝手に変えられるので表現力は上です。
+が、いかんせん面倒なのでやってない+contentEditable内でのカーソル位置の制御が難しい(JavaScriptから調整不可?)なので、僕は諦めた次第です。
+
+# まとめ
+
+textareaの強調表示は、textareaを透明にして後ろにいい感じの背景を設置してるだけ