如何在默认情况下包含textarea图标

我试图在textarea中插入图像，但似乎不可能，除了使用contenteditable ="true"属性textarea。同时，我检查diaspora网站，我发现它可以。我不确定这是如何完成的。是真的textarea或一些CSS通过使用div的技巧？我怎样才能实现相同的？如何在默认情况下包含textarea图标

下面的图像是该功能的表示：

enter image description here

来源

2013-09-23 Zerotoinfinity

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

你必须使用DIV覆盖在文本区域，以便您可以选择图像，并提交形式为多。它完全的CSS游戏。您可以使用绝对div来定位按钮或图像，您所需要做的就是计算位置w.r.t.文本区域。检查出这一点，类似的帖子在link

来源

2013-09-23 21:58:18 devutkarsh

以这种方式？ http://jsfiddle.net/xWanF/ – Zerotoinfinity

这是否意味着，我需要检查浏览器窗口的高度和宽度相同，同时我也必须检查文本框的大小呢？ – Zerotoinfinity

看看这个，在[链接]类似的帖子（http://stackoverflow.com/questions/15314407/how-to-add-button-inside-input） – devutkarsh

对于这样的事情你最好换出一个textarea与元素展示一个更复杂的显示屏，采用.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的CSS和文本区域，这样玩弄他们的外表最终会相互匹配。我之前已经完成了它，并且可以使它成为跨浏览器兼容的。

来源

2013-09-23 22:14:28 BumbleB2na

如何在默认情况下包含textarea图标

回答

相关问题