如何在文本区域中包含默认图标答案

【问题标题】：How to include by default icon inside a textarea如何在文本区域中包含默认图标
【发布时间】：2013-09-28 22:58:48
【问题描述】：

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

下图是该功能的表示：

【问题讨论】：

如果您在浏览器中检查该元素，您可能会发现该图标完全位于文本区域之上。棘手的部分将是如何使用可调整大小的文本区域来实现它。在这种情况下，您可能需要使用 javascript 来计算 textarea 的大小并将这些尺寸应用于包含 div 元素。

标签： css image html textarea

【解决方案1】：

对于这样的事情，最好使用.click() 和.blur() 事件将文本区域与元素交换以显示更复杂的显示。 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，以便它们的外观最终相互匹配。我以前做过，可以做到跨浏览器兼容。

【讨论】：

【解决方案2】：

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

【讨论】：

这是否意味着，我需要检查浏览器窗口的高度和宽度是否相同，同时我也必须检查文本框的大小？
看看这个，link的类似帖子
我知道怎么弄了！感谢您的链接:)
欢迎 0to∞ :) 你只需要弄清楚如何设置