在textarea中插入图片的办法(转载)

最新推荐文章于 2023-03-29 11:14:40 发布
最新推荐文章于 2023-03-29 11:14:40 发布
阅读量2.2w 收藏 17
点赞数 3
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jason3721/article/details/8439755
版权

原文地址：http://www.cnxinhua.com/html/17688.html


最近一个客户要求这个功能----在textarea中插入图片，用来模仿UBB代码，但又不同于UBB，原因是UBB点击某个图片的时候，在textarea中插入的是一些特殊的字符，而他要求的是将图片插入到textarea中。
太难实现了，原因是textarea中只允许插入文字，不允许插入图片，找了很长时间，最终还是没有找到，最后只能改用其他方法模拟。
找了很久，找到div有一个属性 contenteditable，当这个属性为true时，此层可编辑；当这个属性为false时，层不可编辑。
当层可编辑的时候，就像textarea了，但是，当输入的文字的行数多的时候，层会自动加高，这样给这个层加上 overflow:auto;属性就可以了。

以下是我的代码，与大家共享
index.html
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>利用层模拟在textarea表单中插入图片</title>
<script language="javascript" type="text/javascript">

    var pos;
    function getPos()
    {
        pos = document.selection.createRange();
    }

    function fun(str)
    {    
        if(pos!=null)
        {
           // pos.text="插入文字内容";
            pos.pasteHTML("<img src=\""+str+"\">");
            //pos.pasteHTML("<br/>文本框控件:<input id='Text1' type='text' />");
           
            //释放位置
            pos=null;
        }
        else
        {
            alert("没有正确选择位置");
        }       
    }

</script>
</head>
<body>
<form name="form1" method="post" action="1.asp" οnsubmit="document.getElementByIdx_x('content').value=document.getElementByIdx_x('myDiv').innerHTML">
<div style="width:350px;">
 <img src="zhuangtai/10U01a127.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01aH12.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01b5G0.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01bO5.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
 <img src="zhuangtai/10U01bS3.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
 <img src="zhuangtai/10U01c029.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01cM1.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
 <img src="zhuangtai/10U0193a11.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
 <img src="zhuangtai/10U0195L8.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01921G4.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U0193202.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U0195536.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;" />
 <img src="zhuangtai/10U0196434.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01946115.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 <img src="zhuangtai/10U01960113.gif" width="40" height="40" class="img1" onClick="fun(this.src);" style="cursor:hand;"/>
 </div>
 
        <div id="myDiv" style="width: 300px; height: 100px; border: black 1px solid; font-size:small; line-height:1; overflow:auto;"
          οnclick="getPos();"   οnkeyup="getPos();"  contenteditable="true">
          abcdefg</div>
   <div>
   <input type="hidden" value="" name="content" id="content">
   <input type="submit" value="提交" name="submit">
   </div>
</form>
</body>
</html>

jason3721
关注
  • 3
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
利用层实现在Textarea文本框插入图片
05-17
内容索引:ASP源码,其它类别,textarea　　以前在论坛上经常会看到有朋友问如何在文本框Textarea中显示图片，感觉很神秘的技术，其实很简单啊，看一看本例你就明白了。当鼠标点击头像的时候，会把头像插入到文本框中，真正显示图片，而不是插入一个地址，让这种技术不再神秘哦，这是利用层技术实现的。
TextArea在光标处插入内容（话题）
黑猴子[email protected]
06-19 609
在文本域中插入内容，插入话题
要在textarea文本框中粘贴图片怎么办？
weixin_45325250的博客
04-28 4604
项目需求： 有一条描述信息（文字 + 图片），点击编辑，文本框中显示描述信息，并且可以对描述信息做出修改 拆解需求： 文本框里要能显示预设的值（文字 + 图片） 文本框里还要能支持粘贴文字与图片 实际做法 最开始我试图直接使用input元素或者el-input组件，但是在网上找了很多方法，也无法实现图片的显示，后来看到某个大大分享的文章里提到【一个元素比如div加上contenteditabl...
textarea插入表情
wojiaowuyali的博客
05-27 990
push (str) { console.log(str) var text = document.getElementById('mytextarea') var textLength = text.value.length text.focus() if (typeof document.selection !== 'undefined') { document.selection.createRange().text = str } else { text.value = text..
文本域中插入图片
chongting7934的博客
01-12 1349
此代码只在IE中有效！！！ <html> <head> <title>textarea标签中插入图片</title> <script type="text/javascript"> ...
在textarea中插入图片（好）
leveretz的博客
11-11 1006
在textarea中插入图片（好）
关于html中textarea模块插入图片的问题
weixin_43448686的博客
06-09 6820
在html中，textarea对象是不能显示图片的，只能显示文字，于是我们只能使用间接的方式模拟textarea达到相同的效果。 html中div对象有个属性为contenteditable，它的值决定着该div对象控制的区域是否可编辑.当contenteditable设置为ture时，就可以手动编辑该区域。 附上代码 文字处理 function EditShow(sender,content){ var element = document.getElement
html在文本框中输入背景字,如何在评论输入框textarea中加入背景图片
weixin_42134168的博客
06-04 1855
访问量:53在评论输入输入框中，显示一张图片而又不影响文字的输入，其实就是在textarea中加入背景来实现，一般来说，为了好看，当访客进入网站之后，点击textarea时候，背景图片就得消失，所以一共加起来，在评论输入框textarea中加一张图片就包含了以下两个部分。一、加入背景图片以本网站为例，找到控制textarea的样式表内容，添加的内容，我已经加粗。notes .comment-pos...
富文本编辑器直接粘贴图片实现
Mr_Zang666的博客
07-15 369
这种方法是servlet，编写好在web.xml里配置servlet-class和servlet-mapping即可使用 后台（服务端）java服务代码：（上传至ROOT/lqxcPics文件夹下） <%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%><%@ pagecontentType="text/html;charset=utf-8"%><%@ pageim...
jQuery实现在textarea指定位置插入字符或表情的方法
11-29
本文实例讲述了jQuery实现在textarea指定位置插入字符或表情的方法。分享给大家供大家参考。具体实现方法如下： 1. 函数定义     复制代码 代码如下:(function($){     $.fn.extend({         insertAtCaret: function(myValue){             var $t=$(this)[0];             if (document.selection) {                 this.focus();                 sel = document.selection.cre
在textarea中显示html页面的javascript代码
10-30
在textarea中显示html页面的javascript代码
jQuery往textarea中光标所在位置插入文本的方法
01-19
本文实例讲述了jQuery往textarea中光标所在位置插入文本的方法。分享给大家供大家参考。具体实现方法如下： <html> <head> [removed][removed] [removed] $(function() { /* 在textarea处插入文本--...
JS在textarea光标处插入文本的小例子
10-27
本实例使用Javascript实现在textarea光标处插入文本,支持多种浏览器
将自己上传的图片在textarea中显示（备用）
qizhichao110的专栏
05-17 3349
前台布局和样式           上传图片     1、图片大小不能超过2M     2、支持格式：.jpg .gif .png .bmp                       加上一段js代码，                 $(function () {
文本框插入表情包
qq_48492754的博客
03-29 955
原生js在可编辑div中插入表情
文本域粘贴图片
切图仔
12-28 805
<div class="us_textArea js_text js_textarea" contenteditable="true" onpaste="return pasteListener(event, true)"></div> //文本域粘贴图片 function pasteListener(event, isLimit) { $.each(event.clipboardData.items, function(index, item) { if(
如何在textarea中插入提示文本
最新发布
08-03
### 回答1： 在 textarea 中插入提示文本的方法有以下几种: 1. 使用 HTML5 的 placeholder 属性: 在 textarea 标签中添加 placeholder 属性, 并赋值为你想要插入的提示文本即可. 2. 使用 JavaScript: 可以使用 JavaScript 来动态插入提示文本, 例如使用 jQuery 的 val() 方法将提示文本设置为 textarea 的值. 3. 使用 CSS: 可以使用 CSS 的伪元素 ::before 或 ::after 来插入提示文本. 例如: ```html <style> textarea::before { content: "请输入您的留言"; color: #aaa; } </style> <textarea></textarea> ``` 这样就可以在 textarea 中插入提示文本了. ### 回答2： 要在textarea中插入提示文本，你可以使用HTML的placeholder属性。placeholder属性可用于提供一个在文本框中显示的提示性文本，帮助用户理解输入的预期内容。 下面是一个示例： <textarea placeholder="请输入您的评论"></textarea> 在这个示例中，placeholder属性的值是"请输入您的评论"，这个文本会在textarea中显示为灰色的提示文本。当用户开始输入内容时，提示文本会自动消失。 如果需要通过JavaScript来插入提示文本，你可以使用JavaScript的setAttribute方法，如下所示： var textarea = document.getElementById("myTextarea"); // 获取textarea元素 textarea.setAttribute("placeholder", "请输入您的评论"); // 设置placeholder属性值 这个示例中，首先获取了id为"myTextarea"的textarea元素，然后使用setAttribute方法来设置其placeholder属性的值为"请输入您的评论"。 通过这种方式，在textarea中插入提示文本是相当简单的。无论是通过HTML的placeholder属性还是通过JavaScript的setAttribute方法，都可以帮助用户更好地理解他们需要在textarea中输入什么内容。 ### 回答3： 要在textarea中插入提示文本，可以通过在textarea标签中添加placeholder属性来实现。这样，在textarea中会显示一段示意性的文本，用于提示用户在该文本域中输入什么内容。 例如，可以将textarea标签写成以下形式： <textarea placeholder="请输入您的建议或留言"></textarea> 上述代码中的placeholder属性的值即为提示文本，可以根据实际需要进行修改。当用户点击或选定textarea时，提示文本会自动消失，当用户开始输入文本时，提示文本也会逐渐消失。 通过使用placeholder属性，我们可以有效地向用户提供输入内容的建议或指导，提高用户的使用体验和便利性。同时，也可以减少额外的说明文字或标签，使页面更加简洁明了。这在表单提交、留言功能等场景中特别有用。 当用户提交表单或留言时，可以通过判断textarea中的值是否为提示文本来防止用户未输入内容直接提交。可以通过JavaScript或其他编程语言在提交前进行判断和处理。 总之，通过使用textarea的placeholder属性，可以在该文本域中插入提示文本，提供给用户输入内容的指导，提高用户体验和页面整体的可用性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值