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

news2024/11/19 15:00:24
<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.coloradmin.cn/o/2243451.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

每天五分钟深度学习pytorch:批归一化全连接网络完成手写字体识别

本文重点 前面我们学习了普通的全连接神经网络,后面我们学习了带有激活层的全连接神经网络,本文我们继续进一步升级,我们学习带有批归一化的全连接神经网络,批归一化可以加快神经网络的训练速度,减少过拟合,具体它的原理,大家可以看我们的《每天五分钟深度学习》专栏,…

JavaWeb后端开发知识储备1

目录 1.DTO/VO/PO 2.MVC架构/微服务架构 3.JWT令牌流程 4.ThreadLocal 5.接口路径/路径参数 6.自定义注解 1.DTO/VO/PO 1.1 DTO DTO 即 Data Transfer Object—— 数据传输对象&#xff0c;是用于传输数据的对象&#xff0c;通常在服务层与表现层之间传递数据&#xff…

什么是SMARC?模块电脑(核心板)规范标准简介三

1. 概念 SMARC&#xff08;Smart Mobility ARChitecture&#xff0c;智能移动架构&#xff09;是一种通用的小型计算机模块定义&#xff0c;基于ARM和X86技术的模块化计算机低功耗嵌入式架构平台&#xff0c;旨在满足低功耗、低成本和高性能的应用需求。这些模块通常使用与平板…

Filebeat升级秘籍:解锁日志收集新境界

文章目录 一、什么是filebeat二、Filebeat的工作原理2.1 filebeat的构成2.1.1 Prospector 组件2.1.2 Harvester 组件 2.2 filebeat如何保存文件的状态2.3 filebeat何如保证至少一次数据消费 三、Filebeat配置文件四、filebeat对比fluented五、Filebeat的部署安装5.1裸金属安装5…

C++小白实习日记——Day 4 将本地项目上传到gitee

生活就像一坨狗屎 我跑的代码老板说耗时太长了&#xff0c;不知道要怎么做才能耗时小一点 老板把我加到企业gitee里了&#xff0c;让我将代码上传到个人仓库&#xff1a; 新建一个文件夹当做库文件&#xff0c;点git bash here——> git init——>git config --global…

qiankun主应用(vue2+element-ui)子应用(vue3+element-plus)不同版本element框架css样式相互影响的问题

背景&#xff1a;qiankun微前端架构实现多应用集成 主应用框架&#xff1a;vue2 & element-ui 子应用框架&#xff1a;vue3 & element-plus >> 问题现象和分析 登录页面是主应用的&#xff0c;在登录之后才能打开子应用的菜单页面&#xff0c;即加载子应用。 首…

云渲染,解决houdini特效缓存太大上传太慢的问题

对于从事 Houdini 创作的艺术家和设计师们来说&#xff0c;使用云渲染的朋友&#xff0c;缓存太大导致云渲染上传慢一直是一个令人头疼的问题。然而&#xff0c;现在有了成都渲染 101 云渲染&#xff0c;这个难题迎刃而解。Houdini 以其强大的功能能够创建极为复杂和逼真的特效…

前端开发迈向全栈之路:规划与技能

一、前端开发与全栈开发的差异 前端开发主要负责构建和实现网页、Web 应用程序和移动应用的用户界面。其工作重点在于网页设计和布局&#xff0c;使用 HTML 和 CSS 技术定义页面的结构、样式和布局&#xff0c;同时运用前端框架和库如 React、Angular 或 Vue.js 等构建交互式和…

学习QT第二天

QT6示例运行 运行一个Widgets程序运行一个QT Quick示例 工作太忙了&#xff0c;难得抽空学点东西。-_-||| 博客中有错误的地方&#xff0c;请各位道友及时指正&#xff0c;感谢&#xff01; 运行一个Widgets程序 在QT Creator的欢迎界面中&#xff0c;点击左侧的示例&#xf…

删除课表中课程

文章目录 概要整体架构流程技术细节小结 概要 业务分析 删除课表中的课程有两种场景&#xff1a; 用户直接删除已失效的课程 用户退款后触发课表自动删除 技术细节 退款通知 其中用户退款与用户报名课程类似&#xff0c;都是基于MQ通知的方式。具体代码是在tj-trade模块的…

MySQL深度剖析-索引原理由浅入深

什么是索引&#xff1f; 官方上面说索引是帮助MySQL高效获取数据的数据结构&#xff0c;通俗点的说&#xff0c;数据库索引好比是一本书的目录&#xff0c;可以直接根据页码找到对应的内容&#xff0c;目的就是为了加快数据库的查询速度。 索引是对数据库表中一列或多列的值进…

MATLAB常见数学运算函数

MATLAB中含有许多有用的函数,可以随时调用。 a b s abs abs函数 a b s abs abs函数在MATLAB中可以求绝对值,也可以求复数的模长:c e i l ceil ceil函数 向正无穷四舍五入(如果有小数,就向正方向进一)f l o o r floor floor函数 向负无穷四舍五入(如果有小数,就向负方向…

如何使用本地大模型做数据分析

工具&#xff1a;interpreter --local 样本数据&#xff1a; 1、启动分析工具 2、显示数据文件内容 输入&#xff1a; 显示/Users/wxl/work/example_label.csv 输出&#xff1a;(每次输出的结果可能会不一样&#xff09; 3、相关性分析 输入&#xff1a; 分析客户类型与成…

操作系统不挂科】<创建线程(7)>单选多选简答题(带答案与解析)

前言 大家好吖&#xff0c;欢迎来到 YY 滴操作系统不挂科 系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 本博客主要内容&#xff0c;收纳了一部门基本的操作系统题目&#xff0c;供yy应对期中考试复习。大家可以参考 本章为选择题题库&#xff0c;试卷…

RAG(Retrieval-Augmented Generation)评测篇

一、为什么需要 对 RAG 进行评测&#xff1f; 在探索和优化 RAG&#xff08;检索增强生成器&#xff09;的过程中&#xff0c;如何有效评估其性能已经成为关键问题。 二、如何合成 RAG 测试集&#xff1f; 假设你已经成功构建了一个RAG 系统&#xff0c;并且现在想要评估它的…

宝塔 docker 部署onlyoffice 服务

1.宝塔安装docker,直接下载安装就行 2.docker拉取onlyoffice镜像 docker pull onlyoffice/documentserver:5.3.1.26 5.4或更高的版本已经解决了连接数限制方法的Bug 3.创建容器 docker run -d --name onlyoffice --restartalways -p 暴露端口号:80 onlyoffice/documentserv…

强制放大缩小(适用于所有ctrl-,ctrl+)

以下操作&#xff1a; 使用资源管理器打开启动文件夹&#xff1a; 按下 Win R 键打开“运行”对话框。输入 shell:startup&#xff0c;然后按下 Enter。这应该会打开启动文件夹。 手动定位启动文件夹&#xff1a; 打开资源管理器并导航到以下路径&#xff1a; C:\Users\admin…

项目2:简易随机数生成器 --- 《跟着小王学Python·新手》

项目2&#xff1a;简易随机数生成器 — 《跟着小王学Python新手》 《跟着小王学Python》 是一套精心设计的Python学习教程&#xff0c;适合各个层次的学习者。本教程从基础语法入手&#xff0c;逐步深入到高级应用&#xff0c;以实例驱动的方式&#xff0c;帮助学习者逐步掌握P…

数字资产与大健康领域的知识宝藏:高效知识库搭建策略

在数字化时代&#xff0c;大健康领域的企业积累了丰富的数字资产&#xff0c;这些资产如同一座待挖掘的金矿&#xff0c;蕴含着巨大的价值。高效搭建知识库&#xff0c;能够将这些数字资产转化为企业竞争力。 数字资产与大健康领域知识宝藏 数字资产在大健康领域包括患者数据…