擬似的なテキストエリア?



0   名前: 匿名 : 2007/08/25(土) 15:05  ID:7RJUJ8QR sub-Cl
絵文字対応ブログ等で、文字を入力するエリアに絵文字を挿入すると、そのまま画像が表示されますが、どのような仕組みなのでしょうか?
通常の複数行テキスト入力欄ですと、右側隅にスクロールバーが表示されますが、絵文字が画像で表示される文字入力欄には、改行を繰り返して範囲を超えるまでは、スクロールバーが表示されませんでした…
なんらかの形で他のものを擬似的にテキストエリアに見せているといったことなのでしょうか?

絵文字対応の掲示板の作成を考えているのですが、検索で引っかかったのは、画像に対して特定の文字コードを設定して絵文字を入力すると画像の代わりにその文字コードが表示され、送信後、画像に変換されるといったものしかありませんでした。
文字コードで表示されるより画像で表示された方が分かり易くて良いと思うので是非導入したいのですが、仕組みが分からず困っています。
仕組みの分かる方がいらっしゃいましたら、アドバイスよろしくお願いします。

1   名前: カヅサツ ◆ThCi95HEzw : 2007/08/25(土) 15:05  [URL]  ID:O5hEMlpW sub-r2
> 絵文字対応ブログ等で、文字を入力するエリアに絵文字を挿入すると、そのまま画像が表示されますが、どのような仕組みなのでしょうか?

そういう時は、「http:××〜 で○○すると△△されるように見れるが、これはどのようなテクニックを使うのが良いか」というように質問されるとよろしいかと思います。

2   名前: 質問主 : 2007/08/25(土) 15:05  ID:7RJUJ8QR sub-Cl
記事の投稿画面を表示しないことには、状態を確認していただくことは、できないと思うので、テキスト入力欄に文字と絵文字を入力した状態でプリントスクリーンした物を確認して下さい。
http://www.geocities.jp/pretty_angel_kiss_2007/sample.png
改めて、文字入力欄に画像を表示する仕組みをご存知な方がいらっしゃいましたらアドバイスよろしくお願いします。

3   名前: 匿名 : 2007/08/25(土) 15:05  ID:YpPpbJH0 sub-B3
画面から見るイメージだけですが・・
(ブログ等利用しないのでよくわかってません)

編集内容を表示しているのはHTMLで、次のような構成にする。
(表示内容)
 [1]あいうえおかき([2]画像)[3]かきくけこさし
(タグの構造)
 <[1]用のテキストエリア><[2]を表示する画像タグ(DIV?)><[3]用のテキストエリア>

テキストエリアにフォーカスが当たったら監視用の関数を走らせてリアルタイムで入力中文字数を取得する。
取得した文字数にあわせてテキストエリアの幅を動的に書き換える。

どうでしょうか。

4   名前: 3 : 2007/08/25(土) 15:05  ID:ApJ36G3U sub-B3
あ、テキストエリアはあらかじめCSSなどで枠線無しにしておく。

一覧へ戻る