textarea内容自动换行,textarea文本框换行符
当我们使用textarea在前台编辑文本，用js提交到后台时，空格和换行符是我们需要考虑的最重要的问题。在textarea中，空格和换行符会被保存为/s和/n，如果前台输入和显示的文本都在textarea中，则不需要做任何处理。您在文本区中编写的样式将根据您之前编辑的样式正确显示。
然后，如果你需要textarea编辑提交的文本，从后台返回后没有显示在textarea中，那么你就需要考虑处理空格和换行符了。
其实我之前接触的时候根本没有考虑过这些问题。也是因为最近做的项目中有类似这样的需求，需要用户在textarea中输入文本，提交后以文章的形式显示在页面上。无论用户输入多少空格，默认情况下每段只缩进2个字符，还要考虑用户上传的诗歌形式，即每段之间可能有两行空格。总结一下，一句话，就是去掉用户输入中的空格，保留段落间的换行符。
那么我最后的做法就是不做任何处理，在后台保存。显示时，从背景中获取文本后，去掉文本中的所有空格，然后在pre标签中显示。
这里我用一个小例子来说明textarea在各种情况下的保存和显示。首先，创建一个简单的html页面。为了方便数据的获取和显示，我引入vue来处理数据，将一个click事件绑定到submit按钮，点击OK显示在下面。的基本页面结构和js如下：
Class= app p请输入内容：/p TextArea Name= t1 rows= 8 cols= 80 v-model= text 1 /TextArea Button Submit/Button p显示的内容：/TextArea Name= T2 id= cols= 80 rows= 8 v-model= TextArea/div//JS part const VM=new vue({ El: # app ，data: {text1: ，text 2:)} })不处理空格和换行 显示在 textarea 里面
这一步很简单。直接点击提交，就可以看到效果了，如下图。不做任何处理，保留所有空格和换行符，适合保存和编辑。
不处理空格和换行 显示在 div 里面
只需用div替换第二个textarea，效果如下图。可以看到空格和换行符都没有处理，直接忽略。
Div= app p请输入内容：/p textarea name= t1 rows= 8 cols= 80 v-model= text 1 /textarea button @ click= Submit text Submit/button p显示内容：/p p{{text2}}/p/div
不处理空格和换行 显示在 pre 标签里面
用pre标记替换div，并在pre标记中显示提交的文本。pre元素定义预先格式化的文本。包含在pre元素中的文本通常保留空格和换行符。它的常见应用是显示代码。在技术网站和博客中，pre标签用于包装代码块。
从下图所示的效果可以看出，pre标签也可以完整的保留用户输入的空格和换行符，似乎可以满足我的基本需求。那么接下来的问题就是，如何去掉空格，实现2个字符的自动缩进。
Div= app p请输入内容：/p textarea name= t1 rows= 8 cols= 80 v-model= text 1 /textarea button @ click= submit text submit/button p显示内容：/p pre{{text2}}/pre/div？这样能满足需求吗？答案显然是否定的，因为这个属性指定了块级元素第一行文本的缩进，而且从头到尾只有一个块级元素pre，显然无法实现。我们必须考虑用户自己输入的空间。
替换空格保留换行
既然直接显示不行，看来还是要处理文字，那就处理吧。首先，试着去掉所有的空格。首先想到的是trim()方法。其思想是通过用换行符分隔来获取每段文本，然后使用trim()方法删除文本前后的空格，并使用
用标签将文本的每一段换行，然后用br换行符将每一段拼接起来。同时，不使用pre标签来显示文本，而是将处理过的html片段直接插入div标签，这里使用了vue的v-html属性。
Div= app p请输入内容：/p textarea name= t1 rows= 8 cols= 80 v-model= text 1 /textarea button @ click= submit text 提交/button p显示内容：/p div v-html= text 2 style=/div/div//js part submit text(){ let arr=[]；this.text1.split(\n )。forEach(item=arr . push(` p $ { item . trim()}/p `)；this . text 2=arr . join( br )；}如下图所示，基本实现了自动缩进和换行。
让我们输入一首诗，添加一些风格，看看最后的效果是什么：
输入文章的另一段，输入的时候打乱文章的缩进。你可以看到，无论我们怎么缩进，显示效果总是缩进两个字符，这样要求就实现了！
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。