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

小程序中模拟发信息输入框,让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.kler.cn/a/400111.html

相关文章:

  • 基于yolov8、yolov5的行人检测识别系统(含UI界面、训练好的模型、Python代码、数据集)
  • 哋它亢SEO技术分析:如何提升网站在搜索引擎中的可见性
  • DataStream编程模型之数据源、数据转换、数据输出
  • Webpack 1.13.2 执行 shell 命令解决 打印时没有背景色和文字颜色的问题
  • 三周精通FastAPI:42 手动运行服务器 - Uvicorn Gunicorn with Uvicorn
  • <项目代码>YOLOv8 番茄识别<目标检测>
  • Qt 日志文件的滚动写入
  • 聚类算法总结
  • win7系统下惠普测试打印页失败提示“系统不支持请求的命令”解决方法
  • FPGA通过MIPI CSI-2发送实时图像到RK3588,并HDMI显示
  • Maven的下载安装及配置
  • Postman之数据提取
  • R语言-快速对多个变量取交集
  • JavaWeb 开发面试题及参考答案
  • Python+Pyecharts重画基金净值曲线(全)
  • K8S资源限制之resources
  • 《大数据中的高级 SQL 技巧技》
  • LinuxWEB服务器的部署及优化
  • Jupyter Notebook 与 PyTorch 配置教程
  • 迷你游戏作为电子学习中的趋势工具
  • hadoop3.x 新特性
  • 学习threejs,使用TWEEN插件实现动画
  • 利用正则表达式批量修改文件名
  • Python读取prophesee相机输出的raw文件
  • java itext后端生成pdf导出
  • 企业架构框架之银行业参考架构BIAN