您现在的位置: 365建站网 > 365学习 > textarea换行的实现方法和textarea怎么解决换行问题

textarea换行的实现方法和textarea怎么解决换行问题

文章来源:365jz.com     点击数:239    更新时间:2020-04-17 12:57   参与评论

textarea换行的实现方法和textarea怎么解决换行问题:

当我们使用 textarea 在前台编辑文字,并用 js 提交到后台的时候,空格和换行是我们最需要考虑的问题。在textarea 里面,空格和换行会被保存为/s/n,如果我们前台输入和前台显示的文字都是在 textarea 里面,其实并不需要做任何处理,你在 textarea 里面编写的样式会按照你之前编辑时候的样式,正确的显示出来。

那么如果你需要 textarea 编辑提交的文字,从后台返回之后,不是显示在 textarea 里面,那么就需要考虑处理空格和换行啦。

为什么会出现这个问题呢?我想预设好textarea的值,像这样,让用户输入的时候直接另起一行!

下面的方法是没有用的。

1.企图在HTML里面加上<br />或\r\n

<textarea cols="15" rows="8" id="Txt">To:夏尔<br /></textarea>
<textarea cols="15" rows="8" id="Txt">To:夏尔\r\n</textarea>

2.想用js给其value赋值/n的


js确实有办法让它换行,但是多费事啊,好了,那么答案是什么呢?


很简单,利用html换行符&#10;或&#13;

<textarea cols="15" rows="5">To:夏尔&#10;你好!&#13;再见!</textarea>

效果如下:

image.png


html的textarea内容显示的时候怎么换行?输入的时候换了行,但是读取出来的时候是连在一起的,要怎么才可以显示换行?


方式一:利用pre

1、在textarea输出的div中添加如下CSS样式:

.content {   white-space: pre;
}

2、利用<pre>标签来输出textarea的内容:

<pre>这是textarea中的内容....</pre>

该方式的优缺点:

优点: 

不需要区别浏览器, 正则校验替换, 保存输入的符号  

缺点: 

但是超出长度部分不会折行显示, 在同行显示, 需要添加 white-space的样式

white-space: pre-wrap || pre-line;

pre 标签样式, 可能会改变预期样式 字体大小, 颜色, 字体类型等, 需要全局设置初始值


方式二:将 \n\r 替换成 br 标签

利用正则,写法如下:

input.replace(/\r/ig, '').replace(/\n/ig, '<br/>')

注意: 需要 dangerouslySetInnerHTML: { \_\_html: text} 解析。

该方式的优缺点:  

优点:  

可设置自动换行,可不修改样式, 如果统一处理包裹标签有可能会影响 

缺点:  

dangerouslySetInnerHTML 有 XSS 漏洞, 建议使用 html escape 处理

import _ from 'lodash';
 
const createHtml = encodedHtml => ({
    __html: encoded(createHtml)
});
 
function encoded(html) {
    return _.escape(html).replace(/\r/g, '').replace(/\n/g, '<br/>')
}
 
export function newlineReplaceBr(input) {
    if (input) {
        return h.span({
            dangerouslySetInnerHTML: createHtml(input)
        })
    }
    else {
        return ''
    }
}


方式三:直接在渲染标签元素上添加 white-space: pre-wrap | pre-line | pre  

所有浏览器都支持 white-space 属性。white-space 属性设置如何处理元素内的空白, 换行

pre-wrap 保留空白符序列,但是正常地进行换行
pre-line 合并空白符序列,但是保留换行符
pre: 空白会被浏览器保留, 在遇到换行符或者<br>元素时才会换行, 类似 HTML 中的 <pre> 标签



如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (239人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------