关于textarea要注意的是，在微信小程序，百度小程序及字节跳动小程序中，textarea是原生组件，层级高于前端组件，请勿在scroll-view，swiper，picker-view，movable-view中使用textarea组件，覆盖textarea需要使用cover-view
在实际开发中，textarea组件中的换行符为 \r\n，并不是HTML的</br>标签。因此，使用rich-text组件输出时并不能显示换行，需要将\r\n转换成</br>标签，代码示例如下：文章来源：https://www.toymoban.com/news/detail-504725.html
<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>
使用replace将\n和\r\n替换成<br/>标签即可，\n代表UNIX操作系统中的换行，\r\n是windows操作系统的换行，为了兼容，须将两者中的换行都替换文章来源地址https://www.toymoban.com/news/detail-504725.html
到了这里，关于【uni-app】textarea中的换行问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
