当前位置: 首页 > news >正文

小程序中模拟发信息输入框,让textarea可以设置最大宽以及根据输入的内容自动变高的方式

<textarea 
show-confirm-bar="{{false}}" 
value="{{item.aValue}}" 
maxlength="301" 
placeholder="请输入" 
auto-height="{{true}}" 
bind:blur="onBlurTextarea" 
focus="{{true}}" 
bindinput="onInput" 
placeholder-style="font-size: 28rpx;color:#acacac;" 
class="comment-box-textarea colorActive" 
adjust-position="{{false}}" 
bindfocus="inputFocus" 
/>

注意:

show-confirm-bar="{{false}}' (这行代码的意思是,当 show-confirm-bar 的值为 false 时,将不会显示软键盘上的完成按钮。通过这种方式,你可以控制是否显示这个额外的空白条和其中的完成按钮。这种方法适用于微信小程序,因为它提供了一个直接的属性来控制这个特定功能的显示与否。如果你不希望显示这个完成按钮,只需将 show-confirm-bar 设置为 false 即可)

adjust-position="{{false}}"(表示禁止键盘弹出时页面的自动滚动‌。当微信小程序中的textarea组件的adjust-position属性设置为false时,键盘弹起时页面不会自动上推,从而避免了页面内容的移动和遮挡问题‌)

focus="{{true}}"(默认进去页面,强行获取焦点)

placeholder="“ (没有输入之前的提示文字)

placeholder-style="font-size: 28rpx;color:#acacac;"(提示文字的样式设置)

maxlength="301"(文字的最多字数限制)

bindinput="onInput"(获取输入的信息事件)

bind:blur="onBlurTextarea"(失去焦点事件)

auto-height="{{true}}"(开启自动高模式)

bindfocus="inputFocus"(获取焦点的事件,这里就是可以获取默认手机键盘的弹起高度设置)

code:

inputFocus(e) {console.log(e.detail.height,'键盘弹起获取height')if (e.detail.height) {this.setData({inputHeight:e.detail.height})}},


 

http://www.lryc.cn/news/487637.html

相关文章:

  • 学习HTML第二十九天
  • 汽车安全再进化 - SemiDrive X9HP 与环景影像系统 AVM 的系统整合
  • QString 转 char*问题与方法(const_cast的使用问题)
  • flink cdc 应用
  • MyBlog(三) -- APP的应用
  • docker有哪些网络模式
  • npoi 如何设置单元格为文本类型
  • Vue3、Vite5、Primevue、Oxlint、Husky9 简单快速搭建最新的Web项目模板
  • DataStream编程模型之数据源、数据转换、数据输出
  • 海康IPC接入TRTC时,从海康中获取的数据显示时色差不正确
  • 『VUE』31. 生命周期的应用(详细图文注释)
  • Mybatis框架之建造者模式 (Builder Pattern)
  • Java从入门到精通笔记篇(十三)
  • 嵌入式:STM32的启动(Startup)文件解析
  • ElasticSearch学习笔记四:基础操作(二)
  • ODA-em-application.log太大处理
  • 基于现金红包营销活动的开源 AI 智能名片与 S2B2C 商城小程序融合发展研究
  • 远程管理不再难!树莓派5安装Raspberry Pi OS并实现使用VNC异地连接
  • React中 setState 是同步的还是异步的?调和阶段 setState 干了什么?
  • 【D3.js in Action 3 精译_040】4.4 D3 弧形图的绘制方法
  • C++设计模式:抽象工厂模式(风格切换案例)
  • 搜维尔科技:Xsens随时随地捕捉,在任何环境下实时录制或捕捉
  • 爬虫基础总结 —— 附带爬取案例
  • 图像处理学习笔记-20241118
  • 不能打开网页,但能打开QQ、微信(三种方式)
  • 使用 start-local 脚本在本地运行 Elasticsearch
  • 计算机网络:概述知识点及习题练习
  • python蓝桥杯刷题2
  • 在openi平台 基于华为顶级深度计算平台 openmind 动手实践
  • KF UKF