uniapp 输入框内容换行（ 输入框内容展示时换行）

已于 2024-05-25 17:33:23 修改
阅读量1.2k 收藏
点赞数
分类专栏： uniapp 文章标签： uni-app html5 前端
于 2023-04-04 17:49:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45811884/article/details/129958766
版权

输入框内容在展示时全部挤在一起

1、输入框用 textarea 标签，点击换行时会添加\n，切换所有 \n 为 < br > 换行标签 ，使用富文本标签渲染
2、输入框用 textarea 标签，使用textarea 渲染，高度自适应（auto-height），禁止输入 {disabled}

效果

在这里插入图片描述

不法
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【uni-app】textarea中的换行问题
loyd3的博客
11-16 6190
关于textarea要注意的是，在微信小程序，百度小程序及字节跳动小程序中，textarea是原生组件，层级高于前端组件，请勿在scroll-view，swiper，picker-view，movable-view中使用textarea组件，覆盖textarea需要使用cover-view。因此，使用rich-text组件输出时并不能显示换行，需要将。是windows操作系统的换行，为了兼容，须将两者中的换行都替换。在实际开发中，textarea组件中的换行符为。代表UNIX操作系统中的换行，
文本框自动换行
03-15
实现文本框自动换行，像微信的输入框一样，文字多了以后会自动换行
uniapp 文本自动换行数字不自动换行问题记录
最新发布
qq_59175937的博客
05-17 169
【代码】uniapp 文本自动换行数字不自动换行问题记录。
在uniapp或者vue中，单行文字或者数字无法换行导致后面内容无法展示问题的解决方案
二三的博客
11-17 4835
在vue或者uniapp的开发中，有时候会遇到比较奇怪的问题，这里以uniapp举例： <view> <text>任务归类：23146498798798865456465489797</text> <text>任务归类：23146498798798865456465489797</text> </view> 在我的实际开发中，如果 text 标签中的内容为数字，且内容过长的时候，在h5端显示会导致不换行，从而只展示前面的内容；但
uniapp自动换行
热门推荐
qq_40924516的博客
03-03 1万+
word-break:break-all;
UNI-APP，text、rich-text控件显示字符串，当字符串过长时，实现自动换行
沧海龙腾LV的博客
11-04 5005
【代码】UNI-APP，text、rich-text控件显示字符串，当字符串过长时，实现自动换行。
uni-app实现换行
weixin_49393290的博客
11-23 1万+
uni-app换行符\n及空格渲染问题
qq_43628158的博客
04-13 1万+
1、v-text渲染\n没效果解决方案 方法一：使用v-html（不建议，因为小程序不支持v-html，如果不考虑小程序，可以使用） 方法二：对css增加white-space:pre-wrap; <template> <view class="page_bar"> <view v-text="msg" style="white-space:pre-wrap;"></view> </view> </template> <sc
uniapp的uview2.0框架u--textarea组件无法换行，换行无效问题解决方案
99@小程
12-14 4148
在使用uniapp的uview2.0框架u--textarea组件时，想要使u--textarea支持换行输入，但是默认不支持换行输入，各种百度，没有找到解决问题的方案
uni-app:允许字符间能自动换行（英文字符、数字等）
weixin_46001736的博客
08-31 2716
uni-app:允许字符间能自动换行（英文字符、数字等）
多个view自动换行
08-11
多个view的自动换行
画笔带笔锋和输入框可换行功能
08-30
输入框可设置长度换行，使用js原生
input输入框内容实时监测(附代码)
08-29
主要介绍了如何实时监测input输入框内容，具体操作步骤大家可查看下文详细讲解,感兴趣的小伙伴们可以参考一下。
JavaScript 输入框内容格式验证代码
10-29
当鼠标焦点移至密码输入框时，利用js脚本自动验证用户名的格式正确与否
jQuery Mask Plugin输入框内容格式化插件
06-10
一个用于字段格式的jQuery Mask Plugin输入框内容格式化插件，文本框内容格式化代码，支持日期格式，手机号码，时间格式（小时），带区号的座机号码，美国号码，地区号码，混合类型，邮政编码，货币等文字格式化。
基于Bootstrap重置输入框内容按钮插件
10-22
pureClearButton是一款基于Bootstrap的非常实用的用于清空和重置input输入框内容的jQuery按钮插件，感兴趣的小伙伴们可以参考一下
UNIAPP----输入框字数限制统计，并超出换行
weixin_44126737的博客
07-31 4251
直接上代码： HTML <template> <view> <view class="shurukuang"> <textarea placeholder-style="color:#646464; font-size:24rpx" placeholder="请在这里输入文字介绍下你的商品" @input="desc
uniapp换行符号_uni-app 页面样式与布局
weixin_39641236的博客
12-20 7085
重要说明请删除 app.vue 中的全局样式：view{display:flex;}在需要flex的时候使用flex即可。尺寸单位uni-app框架目前仅支持长度单位 px 和 %。与传统 web 页面不同，px 是相对于基准宽度的单位，已经适配了移动端屏幕，其原理类似于 rem。PS：uni-app 的基准宽度为 750px。开发者只需按照设计稿确定框架样式中的 px 值即可。设计稿 1px 与...
uni-app开发微信小程序数据 \n 换行符失效问题
也简的博客
04-26 9186
uni-app开发微信小程序数据 \n 换行符失效问题
uniapp中input输入框自动换行
05-19
在uniapp中，可以通过设置 `textarea` 标签的 `auto-height` 和 `show-confirm-bar` 属性来实现输入框自动换行的功能。 例如： ``` <template> <view> <textarea :auto-height="true" :show-confirm-bar="false" placeholder="请输入内容" v-model="content" ></textarea> </view> </template> <script> export default { data() { return { content: '' } } } </script> ``` 在上面的示例中，`auto-height` 属性设置为 `true` 表示输入框的高度会根据输入的内容自动调整，`show-confirm-bar` 属性设置为 `false` 表示不显示确认栏，这样就可以实现输入框自动换行的功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值