处理textarea中的换行和空格_el-inputtextarea换行 - CSDN文库

5星 · 超过95%的资源 129 浏览量更新于2023-03-16 评论收藏 466KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

处理处理textarea中的换行和空格中的换行和空格

当我们使用 textarea 在前台编辑文字，并用 js 提交到后台的时候，空格和换行是我们最需要考虑的问题。在textarea 里面，空格和换行会被保存

为/s和/n，如果我们前台输入和前台显示的文字都是在 textarea 里面，其实并不需要做任何处理，你在 textarea 里面编写的样式会按照你之前编辑

时候的样式，正确的显示出来。

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

其实之前在接触的时候，完全没有考虑过这些问题，也是因为最近做的项目里面有一个这样子的需求，要求用户在 textarea 输入文字，提交之后以

文章的格式显示在页面上。不管用户输入的时候打了多少空格，默认每段文字都只缩进2个字符，且要考虑用户上传的诗歌形式，也就是每个段落

之间可能有两行空白。总而言之一句话总结呢，就是—去掉用户的输入的空格，保留段落之间的换行。

那么我最终的做法就是，在保存的时候还是不做任何处理，直接保存到后台。显示的时候，从后台获取到文本之后，去掉文中的所有空格，然后显

示在<pre>标签里面。

这里我用一个小例子来示意一下textarea在各种情况下的保存和显示。首先创建一个简单的 html 页面，为了方便获取数据和显示，我引入 vue 来处

理数据，给提交按钮绑定一个点击事件，点击确定之后，显示在下面。基本的页面结构和 js 如下：

<div class="app">

<p>请输入内容：</p>

<textarea name="t1" rows="8" cols="80" v-model="text1"></textarea>

<button>提交</button>

<p>显示的内容：</p>

<textarea name="t2" id="" cols="80" rows="8" v-model="text2"></textarea>

</div>

// js部分

const vm = new Vue({

el:'#app',

data:{

text1:'',

text2:''

},

methods:{

submitText(){

this.text2 = this.text1;

}

}

})

不处理空格和换行不处理空格和换行显示在显示在 textarea 里面里面

这一步就很简单了，直接点击提交，可以看到效果，如下图。在未做任何处理的情况下，保留了所有的空格和换行，适合保存再编辑。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

评论10

df595420469

2023-06-11

虽然这个文件功能不算复杂，但是很好地解决了问题，这就是实用的力量。

weixin_38637983

粉丝: 8
资源: 907

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈