【uni-app】textarea中的换行问题

loyd3

已于 2022-11-28 09:33:49 修改

阅读量7.3k

点赞数 2

分类专栏： uniapp 开发实践整理文章标签： uni-app 前端 javascript 小程序

于 2022-11-16 13:36:38 首次发布

本文链接：https://blog.csdn.net/loyd3/article/details/127726288

版权

uniapp 开发实践整理专栏收录该内容

27 篇文章

订阅专栏

在微信、百度和字节跳动小程序中，textarea组件为原生组件，层级高，不应在特定组件内使用。textarea的换行符是，需要转换为HTML的<br/>标签才能在rich-text中正确显示。示例代码展示了如何在提交时进行换行符替换。注意和的兼容性处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于textarea要注意的是，在微信小程序，百度小程序及字节跳动小程序中，textarea是原生组件，层级高于前端组件，请勿在scroll-view，swiper，picker-view，movable-view中使用textarea组件，覆盖textarea需要使用cover-view

在实际开发中，textarea组件中的换行符为 \r\n，并不是HTML的</br>标签。因此，使用rich-text组件输出时并不能显示换行，需要将\r\n转换成</br>标签，代码示例如下：

<template>
	<view>	
		<textarea class="area-content" v-model="content" placeholder-style="color:#F76260" :auto-height="true" placeholder="请输入内容"></textarea>
		<button type="button" @click="submit">提交</button>
	</view>
</template>
<script>
	export default{
		name: "textarea-component",
		data(){
			return {
				content: ""
			}
		},
		methods:{
			submit(){
				let content = this.content.replace(/\n/g,"<br/>");
				content = content.replace(/\r\n/g,"<br/>");
				console.log(content)
			}
		}
	}
</script>
<style>
.area-content{
  height: auto;
  padding: 30rpx;
  width: calc(100% - 60rpx);
}
</style>