css - デフォルトでテキストエリア内にアイコンを含める方法

Question

textarea 内に画像を挿入しようとしていましたが、 textareacontenteditable ="true"の属性を使用する以外は不可能のようです。そんな中、ディアスポラサイトをチェックしたところ、可能性があることがわかりました。それがどのように行われたかはわかりません。それは本当にテキストエリアですか、それともdiv を使用したcssトリックですか? どうすれば同じものを実装できますか?

以下の画像は、その機能を表したものです。

Answer 1

このような場合は、テキストエリアを要素と交換して、イベントを使用してより複雑な表示を表示することをお勧めし.click()ます.blur()。これは、遊んでみることができる例です。

HTML:

<div class="container">
    <textarea class="text-area hidden"></textarea>
    <div class="text-area icon-example"></div>
</div>

CSS:

.container {
    position: relative;
    display:inline-block;
}
.text-area {
    width: 200px;
    height: 50px;
    border:1px solid #ccc;
    display:inline-block;
}

.icon-example:after {
    content: url(http://www.stat.ncsu.edu/dept-icons/camera-icon.gif);
    position:absolute;
    z-index:9999;
    right: 3px;
    bottom: 6px;
}

.hidden {
    display:none;
}

JQuery:

$('.text-area').click(function() {
   $(this).hide();
   $(this).parent().find('textarea').show();
});
$('textarea').blur(function() {
   $(this).parent().find('div').text($(this).val()).show();
   $(this).hide();
});

私の例をさらに進めて、div と textarea の CSS をいじって、それらの外観が最終的に互いに一致するようにすることもできます。以前にこれを行ったことがありますが、クロスブラウザー互換にすることができます。