• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：textareaに画像を表示したい）

textareaに画像を表示したい

bara-sの回答

  • bara-s
  • ベストアンサー率0% (0/1)
回答No.1

textareaというのはテキストを入力するための領域なので本質的にそういう使い方はできません。 CSSでtextareaの背景をno-repeat指定して適切なマージンを取れば見た目上は画像の表示を行うことはできるかもしれませんが・・・相当面倒なことになりそうですね。 textareaの変更を監視してプレビューを生成するのが比較的簡単だと思いますがどうでしょうか？

JJDOM
質問者

お礼

回答ありがとうございます。 やはりtextareaに直接画像を 表示させるのは不可能みたいですね。 CSSのbackgroundによる表示では ・タグそのものを隠すためにvalue値を書き換える必要がある ・スクロール時に位置が合わない ・サムネイル表示できない（CSS3非対応ブラウザ） ・複数枚表示できない（CSS3非対応ブラウザ） など、ご指摘の通り相当面倒な上に実用的とは言えないですよね。 とは言え、画像タグやURLをそのまま表示させることは HTMLが分からないクライアントにとって冗長な記号の羅列でしかなく やはり実用的なUIとは考えにくいです。 jqueryなどで擬似的にテキストエリアを作成し ajaxで非同期表示させるようなプラグインを 探してみたのですがなかなか見つからず、 今回質問させていただきました。

この回答がついた質問に戻る
回答 全件
ベストアンサー
はじめまして。 テキストエリア内に画像を表示する事は、おそらく難しい…
いくつものテキストエリアを組み合わせれば楽かな 実際はこうなる感じで …
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • DOMの要素ををtextarea(dropした位置

    jquery ui のdraggable,droppableを使って、あるDOMの要素ををtextarea(dropした位置)に挿入したいです。 ドラッグ、ドロップは普通に動かせるのですが、以下の機能が実装できません。 情報お持ちの方、いらっしゃいましたら、お願いします。 ドラッグ中、または、ドロップした瞬間に、textareaのキャレット位置を取得する 実装方法が思いつきません。 (ドロップ時点です。) 欲を言えば、ドラッグ中にキャレット位置を表示させたいです。 ※ちょうど、chromeやFFで画像をテキストエリアにドラッグするようなイメージです。

  • textareaにタグを挿入したい。

    お世話になります。 divタグのid=で指定した箇所に下記のようにappendChildでtagを挿入する事はできるのですが、textarea内に同じようにタグを挿入した場合、画面には表示されないのです。 FireFoxのFirebagでDOMを見るとタグは挿入されているのですが どうすれば、textareaにタグを挿入してそれをブラウザーで見ることができますでしょうか 大変恐縮ですが、この辺りの解説と解決法をご教授頂けますようお願い致します。 document.getElementById(textarea_test).appendChild(newDoc);

  • jQueryで画像にリンクを張りたい

    HTMLページに <img src="1.jpg" width="50" height="50" id="tes"> というタグがあるのですが、 ページが読み込まれたときに、 そのタグにaタグをつけて <a href="hoge.html" target="_blank"><img src="1.jpg" width="50" height="50" id="tes"></a> とリンクを張りたいのですが以下のような スクリプトを書いてみたのですが、 できません。 <script type="text/javascript"> $(function(){ $('<img />').append($('<a />',{ href:"hoge.html", target:"_blank" }) ) }); </script> jQueryがよくわかっていないのでめちゃくちゃなのだと思いますが、 そもそもこのように画像にaタグをつけることは可能なのでしょうか。 jQueryのバージョンは1.2.6を使っていますが、 新しいバージョンでも構いません。 よろしくお願いします。

  • niceditのtextareaの取得方法

    リッチテキストエディタのniceditを使おうとしています。 他のエディタと比べるとかなりサイズも小さいため容易に動作も軽いです。 ただ、基本的な表示デフォルト時のセットや取得の方法が分かりません。 単純にForm + textareaのnameで取得できると思ったのですが、取得できませんでした。(FireBugで中身を確認したのですが、タグ表記のHTMLソースらしきものが見つかりませんでした。) <script> function onclick() { 　alert(document.test.area.value;); } </script> <form name="test" enctype="multipart/form-data" method="post"> 　<textarea id="area" name="area"></textarea> 助言頂ければうれしいです。 OS :WinXP-SP3 ブラウザ:IE6.0 で確認してますが、FF3 & Opera等でも動作させたいと思ってます。

  • textareaを非表示

    お世話になっております。 <input type=hidden> では１行の文章しか入力できないようなのでtextareaを使用しようと思っております。しかしhiddenのようにテキストエリアを表示させないようにしたいのです。そういった事が可能なのかどなたか教えて頂けないでしょうか。

  • textareaのvalueについて

    ▽textareaの受け渡し - PHP - 教えて！goo 　http://okwave.jp/qa/q3086989.html ＞textarea内に表示させる場合は ＞valueは必要ありません。 ▽[PHP-users 19095]Re: TEXTAREAタグの使い方 　 http://ml.php.gr.jp/pipermail/php-users/2003-November/019622.html ＞<TEXTAREA>のValue値は ＞<TEXTAREA>値</TEXTAREA> ＞となります。 ＞なので、開始タグ内でValue値を指定しても表示されません と書かれているのですが、これはHTMLの仕様なのでしょうか？ また、それは、どこに書かれているのでしょうか？ inputタグはvalueなのに、「textarea」タグでは何故Value値が有効でないか、教えてください。 後、jQueryで「$("textarea").val(data);」とやるのと、 PHPで、<textarea><?php echo $data ?></textarea>とやる行為に、違いはあるでしょうか？ 両者は同じことをやっているという認識で良いでしょうか？

    • ベストアンサー
    • PHP
  • jQueryを使ってtextareaのリッチエディタを作りたいです。

    jQueryを使ってtextareaのリッチエディタを作りたいです。 testareaに対してリッチエディタを作りたいのですが、サンプルコードを教えてください。 基本的にはテキストエリアでボタン（例えばボールドのボタン）を押して始点と終点が同じであればウインドウが開いて文字を入れそれを始点に挿入し、始点と終点が違えば従来のリッチテキストエディタのように実行するというものです。 説明不足かとは思いますが、サンプルコードの載ったURLだけでもかまいませんので宜しくお願いいたします。

  • textareaへの入力支援機能（ボタン）[Javascript]

    textareaへの入力支援機能（ボタン）[Javascript] 他の方が質問されていた件への回答についてのですが、 http://okwave.jp/qa/q2097862.html ANo.3の方の回答を参考にブログにあるようなテキストエリアへの入力支援機能を作成しています。 javascriptはあまり詳しくないので、まず丸々コピーをして テストを行っていたのですが、FIREFOXだと正常に動きますが、 IEの場合、テキストを選択せずにボタンを押すとボタン内に直接タグが追加されてしまいます。 テキストを選択した状態ですと正常に動作するようです。 テキストを選択しなくてもタグが挿入されるか、テキストを選択していない場合はタグが挿入されないようにしたいのです。 色々いじってみたのですが、思うように動かすことができませんでした。。 詳しい方、対処方法がわかる方がいらっしゃったらぜひ教えていただけないでしょうか。 宜しくおねがいします。

  • ｊQueryで表示している所をsubmit無しに置換したい

    jquery1.2.26を使ってます。 イメージタグ出力場所 <div id="img1"></div> Javascript置換 $("#img1").replaceWith("[src='images/aaaa.jpg']"); このようにjQueryのAPIで <img src="aaa.jpg">　→　<img src="bbb.jpg"> のようにしたいのですが、どのようにしたら置換してくれるのでしょうか？ hiddenの場合は簡単なんですけど、表示されているものを置換するのがなかなか・・。 もっと簡単に記述できませんでしょうか？ <input type="hidden" name="dmyflg" id="dmyflg" /> $("#dmyflg").val("1"); <span id="npg"></span> $("#npg").text("ppp"); //←他ブラウザでは？？

  • jQueryで文字数カウンタ（複数対応）

    jQueryのプラグインを作成中です。 指定したテキストフォーム、テキストエリア内の文字数をカウントして、 指定場所に文字数を表示させるというものです。 下記のように記述し、 (function(jQuery) { jQuery.fn.textCount = function(options) { //キーボードが押された時にカウント jQuery(this).live("change keyup",function(){ var count = jQuery(this).val().length; var disp_area = jQuery(this).attr("id"); jQuery("."+disp_area).html(count+"文字"); }); return this; }; })(jQuery); jQuery(".counter").txtCount(); とHTML内で宣言しました。 <textarea id="sample">ここの文字数が</textarea> <div class="sample">ここに表示</div> と、ここまではうまくいきました。 が、テキストエリアの数が複数個あり、数が変動するため、IDを配列にしたいと思っています。 そこで、 <textarea id="sample[1]">個々の文字が</textarea> <div class="sample[1]">ここに表示されない</div> のように記述しました。 すると文字数が表示されなくなってしまいました。 classやidに配列指定はできないのでしょうか。 また、この場合はどのように宣言するのが正しいのでしょうか。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する