textarea文本不换行的问题

textarea里的文本手动加了换行在div里展示的时候还是成一行显示，有两种解决办法

第一种：比较麻烦但也能实现
利用js正则

<body>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<input type="button" id="btn" value="点击按钮">
<div id="desc"></div>
</body>
<script>var txt = document.getElementById('txt')var btn = document.getElementById('btn')var desc = document.getElementById('desc')btn.onclick = function () {var val = txt.valueval = val.replace(/\r\n/g, '<br/>'); //IE9、FF、chromeval = val.replace(/\n/g, '<br/>'); //IE7-8val = val.replace(/\s/g, ' '); //空格处理desc.innerHTML = val;}
</script>

第二种：比较简单，几句css属性就可以解决了
首先用pre标签用来展示要显示的文本
但是如果文本在textarea没有换行那么在pre里也不会换行而是一直显示可能会超出文本框，这时候只要解决pre超出文本的问题就好了

pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}

加上这几个属性就完美解决了。如果文本有换行 pre能换行显示，如果文本没有换行 pre也不会一行显示到底，也会在超出文本框的时候断行。

textarea文本不换行的问题相关推荐

简单的解决textarea文本框内容换行，对应到页面的内容也换行的问题
当我们在页面上通过 textarea 提交数据的时候,我们输入的内容在提交后都会被处理为了一段内容,即使我们在 textarea 里面输入了很多的换行,提交后也是一段内容,那如果我们需要将我们输入的信 ...
Javascript - 获取到textarea文本框中的回车换行符 - 收集/实践 --- 20201005
1.应用场景主要用于获取到textarea文本框中的回车换行符 2.学习/操作 1. 文档 javascript获取到textarea文本框中的回车换行符 - Wuya - 博客园 js如何识别出字 ...
div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com 本文地址: http://www.zhangxinxu.com/wordpress/?p=1362 一.关于t ...
js textarea 显示html代码,将Textarea文本设置为正确格式化的HTML代码与jQuery
我想通过Javascript(jQuery)为我的Textarea生成文本,因为我在JS中需要包含一个变量.这就是我现在要做的:将Textarea文本设置为正确格式化的HTML代码与jQuery $( ...
要在textarea文本框中粘贴图片怎么办？
项目需求: 有一条描述信息(文字 + 图片),点击编辑,文本框中显示描述信息,并且可以对描述信息做出修改拆解需求: 文本框里要能显示预设的值(文字 + 图片) 文本框里还要能支持粘贴文字与图片实际 ...
textarea文本框的placeholder文字换行
textarea文本框的placeholder文字换行一.问题描述二.原生实现三.vue中实现一.问题描述 textarea为前端常用的文本输入框,有时候需要placeholder的文字提示更 ...
微信小程序文本识别换行
微信小程序textarea文本保存后不识别换行. 加一个<text></text>标签可以完美解决
【多个IP地址用逗号分割开】vue简单实现，textarea文本域输入多个ip地址用逗号分隔开，根据空格分割
前言这个功能也是很多地方会用到的. 一般使用的地方是比如需要设置白名单或者黑名单然后页面上会有一个textarea文本域. 在文本域中输入多个ip地址,输入一个回车换一行. 然后点击保存后,把数据 ...
【kindeditor】KindEditor获取多个textarea文本框的值并判断非空
kindeditor官网:http://kindeditor.net/demo.php 如何获取多个KindEditor中textarea文本框的值,方式很多种(带有HTML标签). var intr ...

textarea文本不换行的问题

textarea文本不换行的问题相关推荐

最新文章

热门文章