关于可编辑DIV的操作，包括自动换行等

最新推荐文章于 2024-05-16 08:07:53 发布

励志成为java小白的小白

最新推荐文章于 2024-05-16 08:07:53 发布

阅读量554

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/m0_60312879/article/details/131105758

版权

有一个需求：将后端传过来的文本（文本中含有html标签的字符串）赋值在textarea内，并且要求输出html的样式格式:

例如var str="你好，请按照需求，<font color="red">将这里文字变成红色。</font>"

1.刚开始尝试给textarea 赋值 :，发现html的font标签并没有转换为红色的样式输出，还是保留了标签的字符串形式。

<head>   
    <script type="text/javascript">
          $(function() {
               var str="你好，请按照需求，<font color="red">将这里文字变成红色。</font>"
               $（"#emailText"）.html(str);
          })    

     </script>
</head>

<body>
     <textarea   rows="3"   id="emailText" name="emailText"  ></textarea> 
</body>

2.后来我查了一下，发现textarea是纯文本的标签，赋值什么样的字符串都会原样输出，并不会对html标签进行转换。

3.这时查到可编辑的DIV标签是最好的选择。

<head>   
    <script type="text/javascript">
          $(function() {
               var str="你好，请按照需求，<font color="red">将这里文字变成红色。</font>"
               $("div[name='emailTextDiv']").attr("style","word-wrap:break-word;word-break:break-all");
			   $("#emailTextDiv").html(emailText);
          })    

     </script>
</head>
<body>    
     <div contenteditable="true" id="emailTextDiv" name="emailTextDiv"></div>
</body>

关于可编辑的DIV，涉及的属性：

contenteditable="true" ------这个属性为true代表可编辑

word-wrap:break-word;word-break:break-all ------这两个样式属性加在一起，输入文本时就可以自动换行

励志成为java小白的小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于可编辑DIV的操作，包括自动换行等

word-break:break-all ------这两个样式属性加在一起，输入文本时就可以自动换行。1.刚开始尝试给textarea 赋值 :，发现html的font标签并没有转换为红色的样式输出，还是保留了标签的字符串形式。2.后来我查了一下，发现textarea是纯文本的标签，赋值什么样的字符串都会原样输出，并不会对html标签进行转换。contenteditable="true" ------这个属性为true代表可编辑。3.这时查到可编辑的DIV标签是最好的选择。
复制链接

扫一扫