如何在textarea中包含默认图标

Question

我试图在textarea中插入图像，但除了使用 textarea 的contenteditable ="true"属性之外，这似乎是不可能的。同时，我检查diaspora网站，我发现它是可能的。我不确定是怎么做到的。通过使用div，这真的是 textarea 或一些css 技巧吗？我该如何实现呢？

下图是该功能的表示：

Answer 1

对于类似这样的事情，您最好使用.click()和.blur()事件替换带有元素的textarea以显示更复杂的显示。你可以玩的Here is an example。

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，这样他们的外表最终会相互匹配。我以前做过这个，它可以与跨浏览器兼容。

Answer 2

您必须使用覆盖文本区域的div，以便您可以选择图像并将表单作为多部分提交。 它完全是CSS的游戏。 你可以使用绝对div来定位按钮或图像，你需要做的就是计算w.r.t的位置。文本区域。 看看这个，link

上的类似帖子