div和textarea内容转换(****)

最新推荐文章于 2022-11-10 13:55:48 发布
最新推荐文章于 2022-11-10 13:55:48 发布
阅读量409 收藏
点赞数
文章标签： c#
原文链接：http://www.cnblogs.com/muqnly/p/5458717.html
版权

我能说因为这个东西被折腾了很久吗~~~

终于做出来了，写出来，希望下次遇到的时候不要忘记了。。。

CSS样式

<style>

.zhizuo{
width: 428px;
height: 103px;
float: left;
}
.zhizuo_text{
border: 1px solid grey;
margin-top: -2px;
font-family: "微软雅黑";
outline: none;
margin-bottom: 8px;
height: 95px;
width: 86%;
}

</style>

HTML

<body>
<textarea class="zhizuo_text" οnmοusedοwn="mousedoen_text(this)" οnblur="blur_input(this)" style="display:none;" name="" id="" cols="30" rows="10"></textarea>
<div οnclick="show_text(this)" class="zhizuo">
1、dfjdkfjdkfjd<br>
2、aaaaaaaaaa<br>
3、dfjdkfjdkfjd<br>
4、aaaaaaaaaa<br>
</div>
</body>

SCRIPT

<script>
//点击div后显示前面的textarea
function show_text(obj) { // div
$(obj).css("display", "none");
var div_te = $(obj).html();
div_te = div_te.replace(/<br>/ig, "\r").replace(/<br>/ig, "\n");
$(obj).prev().text(div_te);
$(obj).prev("textarea").css("display", "block");
$(obj).prev().focus();
}
//onblur事件
function blur_input(obj){ //textarea
$(obj).css("display", "none");
var change_obj = $(obj).next(".zhizuo");
var obj_v = $(obj).val();
obj_v = obj_v.replace(/\r/ig, "</br>").replace(/\n/ig, "</br>");
change_obj.html(obj_v);
$(obj).next(".zhizuo").css("display", "block");
}
</script>

 

转载于:https://www.cnblogs.com/muqnly/p/5458717.html

diaojinlx19863
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
textarea的替代品div.contenteditable
qq_16945933的博客
01-29 1331
标签定义多行文本属性控件，可容纳无限数量的文本，通过cols，rows属性设置textarea尺寸，当然也可以用css的width、height属性。 需求： textare作为文本输入固然好用，但是在实际项目中，通过平台识别出来的原文和译文内容，需要默认展示出所有的字幕内容，不能滑动，textare无法自适应文字的高度，用户使用非常不方便，每次都要去拖拽textare的高度。 第一波尝试：可编辑div（引发了其他问题，时间紧急直接放弃了） 刚开始采用了div.contenteditable可编辑的div，
用div实现textarea
weixin_46021847的博客
06-06 293
考察内容：HTML的contenteditable(设置可否编辑)属性。 一、简易版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用div实现textarea</title> </head> <body> <div contenteditable="true">点击这里，可直接进行编辑。&l
vue 中如何将 html 字符串转化为 html
青蛙king的博客
09-08 3417
问题还原： 解决方案：用 v-html。 <div class="proj_content">工作描述：<div v-html="item.proj_content"></div></div>
将html字符串转换成html标签显示到页面上
月亮的博客
09-23 5406
当我们将html字符串放到页面上时，是无法直接显示出我们想要的内容，这时我们需要将字符串转化成为html标签
在 JavaScript 中将字符串转换为 HTML
热门推荐
six6de6的博客
08-30 1万+
在 JavaScript 中将字符串转换为 HTML的三种方法
在textarea文本域中显示HTML代码的方法
10-31
然后，这个`div`元素被添加到`textarea`之后，而不是直接插入到`textarea`的文本中。这种方法虽然不能直接在`textarea`中显示HTML代码，但是可以实现类似的效果，用户可以通过查看网页源代码或者开发者工具来查看...
textarea 在IE和FF下换行无法正常显示的解决方法
10-28
当需要将这些文本显示在页面上的非`textarea` 元素（如`div` 或`p` 标签）时，需要将` ` 转回换行符。这一步骤在JavaScript中同样使用`replace()` 函数： ```javascript var displayedText = formattedText....
输入框jq textarea表情插件特效
11-11
6. **动态更新textarea内容**：由于`textarea`的内容是纯文本，所以表情通常需要以Unicode字符或自定义的短码形式存在。当用户输入完成后，可能需要将这些短码转换回对应的图片。 7. **优化用户体验**：考虑添加...
textarea支持图形编辑的实现方法
09-06
这些编辑器通常使用`iframe`或`div`元素作为编辑区域，而不是直接操作`textarea`，因为`iframe`和`div`能更好地支持富文本格式。 此外，如果需要在`textarea`中显示和编辑带有HTML标签的文本，一种常见做法是将`...
关于textarea文本转为html即回车换行
09-28
当用户在`textarea`中输入内容并按下回车键时，这些回车换行在浏览器显示时通常不会产生换行效果，因为HTML本身并不识别换行符。为了让这些回车换行在HTML中起作用，我们需要将它们转换为HTML能识别的换行标签，通常...
textarea设置的换行文本用div展示
qq_37170740的博客
11-10 764
div 是style：white-space:pre-wrap;
textarea不解析html && div替代textarea
cominglately的博客
05-04 3397
场景 . 在展示一段文字的时候 不希望占用太多的空间；这时候自然就想到了textarea . 但是textarea只是展示纯文本 . 综上使用div实现textarea的功能 解决 . contenteditable 元素是否可以编辑 . div加上一些样式会好看一些 &lt;div class="textarea" contenteditable="true"&gt; //...
div中文字不换行(textarea中输入的文字，输出到div中文字不换自动换行的问题)
草木红的博客
01-09 4882
在文本域中输入文件，并点击回车开始下一行，点击按钮将信息输出到div中 <textarea name="" id="content" cols="30" rows="10"></textarea> <div id="info"></div> <button id="btn">按钮</button> <script src="./js/jquery.min.js"></script> <script>
DIV 模拟 textarea
FOR 的博客
07-20 1124
呼呼呼~ textarea: 为什么？你已经无所不在了，还想着代替我？ div:不好意思了，你在你的领域确实很强大，但是input不能换行，而你却一言不合就出现滚动条，你得知道，这有时候，很丑。 textarea: 其实我是可以高度适应的，you look <style> textarea { padding: 0; } </style> <body> <textarea name="" id="area" cols="34"
[随笔一记]让一个div盒子变成textarea
Tian_randai的博客
11-05 293
主要的属性就是contenteditable这个属性，contentedit的意思是内容编辑，后面+able，就是内容可编辑的。如果想自由拉伸的话，我们则还需要设置resize和overflow属性。但如果只设置了resize是没有用的，得搭配上overflow：auto。将resize设置成both，我们就可以上下和左右自适应拉伸。这样这个div就变成了一个合格的textarea了！然后再给盒子加上点属性，就可以在里面编辑内容啦。在浏览器中显示的效果如下。在浏览器中的效果就是如下。
string 转 html js textarea text 转div
jy00885876的专栏
11-11 2032
String.prototype.replaceAll = function(s1,s2){  return this.replace(new RegExp(s1,"gm"),s2);  }  var textTohtml = function( $str ){     return $str.replaceAll("&", "&")     .replaceAll("  
用一个div模拟textarea的实现
初漾的博客
06-13 5635
转自：http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/   by zhangxinxu 1.contenteditable 属性规定是否可编辑元素的内容。 contenteditable 属性是 HTML5 中的新属性。 2.之前的文章提到过过滤HTML的方法，保证内容都是纯
uniapp textarea显示图片
最新发布
10-12
这些富文本编辑器组件可以支持插入图片，并且可以将编辑器的内容转换为富文本格式进行保存和展示。 另一种解决方案是使用自定义组件，在该组件中使用div元素来展示图片。通过监听用户输入的内容，识别其中的图片...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值