Question

我在html中设计了一个textarea和按钮。我想按下按钮时在textarea中插入图像。如何在javascript或jquery中实现？

Answer 1

Textareas只能包含文字。

Answer 2

Textareas只能包含文字，但您可以重叠元素。以下是一个示例：http://jsfiddle.net/2qMb3/1/

这使用样式div而不是图像，但您可以轻松使用图像而不是div。

Answer 3

正如其他人所说的TextArea只包含Text，你可以尝试这样的事情：

<textarea id="x" rows="5" cols="20">hellooo</textarea>

$('#buttonId').click(function(){
    $('#x').css('background',urlOfImage)
});

Here是一个有效的例子;你必须根据你的要求操纵它。

Answer 4

您可能希望使用WYSIWYG或TinyMCE等CKEditor编辑器。

Answer 5

您可以使用jQuery在点击

上将简单的CSS添加到textarea

HTML

<textarea id="message" rows="2" cols="20"></textarea>
<input type="button" value="Add image to textarea" id="add_image" />

CSS：

<style>
#message{
  padding-left : 30px; // This will prevent the text from overlapping the image
}
#add_image{
 display: block; //just making the button appear in its own line
}
</style>

Javascript：

<script>
$(document).ready(function() {
    $('#add_image').click(function() {
      $('#message').css({
          'background' : 'url(http://lorempixel.com/20/40) no-repeat',
      });
    });
});
</script>

看到它的实际效果： http://jsfiddle.net/gksTQ/

使用javascript或jquery按下按钮时在textarea中插入图像？

5 个答案: