0

我试图在 textarea 内插入图像，但除了使用textareacontenteditable ="true"的属性之外，这似乎是不可能的。同时，我检查了侨民网站，我发现这是可能的。我不确定那是怎么做到的。这真的是通过使用 div的textarea或一些 css技巧吗？我怎样才能实现相同的？

下图是该功能的表示：

在此处输入图像描述

4

2 回答 2

3

对于这样的事情，你最好用一个元素替换一个文本区域来显示更复杂的显示、使用.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;
}

查询：

$('.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，以便它们的外观最终相互匹配。我以前做过这个，它可以跨浏览器兼容。

于 2013-09-23T22:14:28.237 回答
1

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

于 2013-09-23T21:58:18.293 回答