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

我试图在 textarea 中插入图像,但除了使用 textareacontenteditable ="true" 属性之外,这似乎是不可能的。同时,我检查了diaspora 站点,我发现这是可能的。我不确定那是怎么做到的。这真的是 textareasome 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∞ :) 你只需要弄清楚如何设置
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-27
    • 2018-10-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多