微信小程序:单行输入和多行输入组件

微信小程序提供了两种输入类型的输入框组件,分别是单行输入框 <input> 和多行输入框 <textarea>

1. 单行输入组件(input)

单行输入框 <input> <input> 是一个用于收集用户输入的组件,主要用于收集单行文本输入。

input组件用于录入单行文本,尽管input的基本功能是文本录入,但该组件的属性还是比较多的,也比较复杂。

重要的属性有:

主要的监听事件有:

  • value:输入框的初始内容
  • type:input 的类型,如 text, number, idcard, digit等
  • password:是否是密码类型
  • placeholder:输入框为空时占位符
  • disabled:是否禁用
  • maxlength:最大输入长度
  • confirm-type:设置键盘右下角按钮的文字,如 send, search, next, go, done等
  • confirm-hold:点击键盘右下角按钮时是否保持键盘不收起
  • bindinput:当键盘输入时,触发 input 事件
  • bindfocus:输入框聚焦时触发
  • bindblur:输入框失去焦点时触发
  • bindconfirm:点击完成时,键盘输入法收起的事件

如下为input组件的属性及其含义:

  • value:String类型,输入框的当前内容
  • type:String类型,默认值是text。可指定的值:text, number, idcard, digit
  • password:Boolean类型,默认值是false,是否以密码形式录入文本(所有的文本字符都显示为点)
  • placeholder:String类型,输入框为空时显示的文本
  • placeholder-style:String类型,指定 placeholder 的样式
  • placeholder-class:String类型,指定 placeholder 的样式名称
  • disabled:Boolean类型,默认值是false,表示是否禁用输入框
  • maxlength:Number类型,默认值是140,表示文本最大输入长度,设置为 -1 的时候不限制最大长度
  • auto-focus:Boolean类型,默认值是false,该属性为true,可以让当前输入框自动获得焦点,并且自动弹出软键盘。该属性只能在真机上测试,小程序开发工具目前没有软键盘。同一个wxml文件中,只能有一个输入框设置该属性为true,输入框还包括后面要介绍的textarea组件
  • focus:Boolean类型,默认值是false,该属性可以让输入框获的焦点,目前开发工具暂不支持,只能在真机上测试
  • bindinput:EventHandle类型 ,除了date/time类型外的输入框,当键盘输入时,触发input事件,event.detail = {value: value},处理函数可以直接 return 一个字符串,将替换输入框的内容
  • bindfocus :EventHandle类型,输入框获得焦点时触发,event.detail = {value: value}
  • bindblur:EventHandle类型,输入框失去焦点时触发,event.detail = {value: value}

注意:这些属性中,auto-focus和focus目前只能在真机上测试。

常用使用方法实例:

<view style="margin:20px"><input placeholder="请输入你的姓名" value="默认值" /><input placeholder-style="color:green" placeholder="占位符字体是绿色的" auto-focus/><input style="margin-top:25px" placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" /><button bindtap="bindButtonTap">使得输入框获取焦点(在真机上测试)</button><input style="margin-top:25px" maxlength="10" placeholder="最大输入长度10" /><view style="margin-top:25px">你输入的是:{{inputValue}}</view><input bindinput="bindKeyInput" placeholder="输入同步到view中" /><input style="margin-top:25px" bindinput="bindReplaceInput" placeholder="将<和>进行转义" /><input style="margin-top:25px" bindinput="bindHideKeyboard" placeholder="输入close自动收起键盘" /><input style="margin-top:25px" type="emoji" placeholder="这是一个带有表情的输入框" /><input type="digit" placeholder="带小数点的数字键盘" /><input type="idcard" placeholder="身份证输入键盘" /><input password="true" placeholder="请输入你的密码" />
</view>

完整实现代码如下:

Page({data:{focus:false,inputValue:""},bindButtonTap:function(){this.setData({focus:true})},bindKeyInput:function(e){this.setData({inputValue:e.detail.value})},//  当输入<和>是,会自动转换为<和>bindReplaceInput:function(e){var value = e.detail.value;var pos = e.detail.cursor;if(pos != -1){//光标在中间var left = e.detail.value.slice(0,pos);//计算光标的位置pos = left.replace(/</g,'<').replace(/>/g,'>').length;}//直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置return {value:value.replace(/</g,'<').replace(/>/g,'>'),cursor:pos}},bindHideKeyboard:function(e){if(e.detail.value === "close"){//收起键盘wx.hideKeyboard();}}
})

 2. 多行文本组件(textarea)

多行输入框 <textarea> <textarea> 是用来输入多行文本的。

textarea允许输入多行文本,如果文本行数超过textarea组件的高度,会出现垂直滚动条。

重要的属性有:

  • value:输入框的初始内容
  • placeholder:输入框为空时占位符
  • disabled:是否禁用
  • maxlength:最大输入长度
  • autoHeight:是否自动增高,设置autoHeight时,style.height不生效

主要的监听事件同 <input>

textarea有如下几个属性。

  • value:String类型,输入框的内容
  • placeholder:String类型,输入框为空时显示的文本
  • placeholder-style:String类型,指定 placeholder 的样式
  • placeholder-class:String类型,指定 placeholder 的样式类名称
  • disabled:Boolean类型,默认值是false,是否禁用textarea组件
  • maxlength:Number类型,默认值是140,最大输入长度,设置为0的时候不限制最大长度
  • auto-focus:Boolean类型,默认值是false,用于自动聚焦,当获得焦点后,自动弹出软键盘,当前页面中只能有一个 <textarea/> 或 <input/> 设置 auto-focus 属性
  • focus:Boolean类型,默认值是false,获取焦点(开发工具暂不支持)
  • auto-height:Boolean类型,默认值是false,表示是否自动增高,设置auto-height时,style.height不生效
  • bindfocus :EventHandle类型,输入框聚焦时触发
  • bindblur:EventHandle类型,输入框失去焦点时触发
  • bindlinechange:EventHandle 类型,输入框行数变化时调用

textarea组件的基本用法实例:

<view style="margin:20px"><textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高" style="background:#ff0"/>
</view>
<view style="margin:20px"><textarea placeholder="placeholder颜色是红色的" placeholder-style="color:red;"  />
</view>
<view style="margin:20px"><textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus />
</view>
<view style="margin:20px"><textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" /><view class="btn-area"><button bindtap="bindButtonTap">使得输入框获取焦点</button></view>
</view>

 第一个textarea组件设置了auto-height属性,该组件会随着行数的增加而变高。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/119117.shtml

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

相关文章

Altium Designer布局技巧

资料 快捷键 PCB导入原理图 验证工程 导入原理图 进入PCB编辑界面&#xff0c;设计→Import Changes from xxxx 多原理图多PCB 创建多个原理图、PCB 略反键点击原理图 勾选高级 选择原理图及目标PCB&#xff0c;点击确定 右键点击列表项&#xff0c;更新原理图&#xff0…

手机桌面待办事项APP推荐

每天&#xff0c;我们每个人都面临着繁琐的事务和任务&#xff0c;而手机成了我们日常生活中不可或缺的伙伴。手机上的待办事项工具像一个可靠的助手&#xff0c;可以帮助我们更好地记录、管理和完成任务。在手机桌面上使用的待办事项APP推荐用哪一个呢&#xff1f; 手机是我们…

服务容错框架Sentinel入门

概述 Sentinel&#xff0c;阿里开源的一套用于服务容错的综合性解决方案。它以流量为切入点&#xff0c;从流量控制、熔断降级、系统负载保护等多个维度来保护服务的稳定性。分布式系统的流量防卫兵。 特征: 丰富的应用场景&#xff1a;秒杀&#xff08;即突发流量控制在系统…

更加轻松处理相同文件名!覆盖复制操作全新升级,避免重复命名!

亲爱的用户&#xff0c;您是否在进行覆盖复制操作时&#xff0c;常常因为相同的文件名而无法正常完成任务&#xff1f;现在&#xff0c;我们为您推出了全新的覆盖复制升级版&#xff0c;让您更加轻松处理相同文件名&#xff0c;避免重复命名的尴尬局面&#xff01; 首先第一步…

el-date-picker如何回显

后端传输过来起止时间&#xff0c;需要回显在 el-date-picker中 未修改前的代码&#xff1a; 问题整改&#xff1a;需要将时间转换为Date类型 修改后的代码 setTime(date){if (date!null){this.value.push(new Date(date.startTime))this.value.push(new Date(date.endTime))c…

环境编程代码实例:“加/卸载” Zend Framework 2

文章目录 前言代码仓库需求介绍代码说明文件结构核心片段 拓展总结参考资料作者的话 前言 环境编程代码实例&#xff1a;“加/卸载” Zend Framework 2。 代码仓库 yezhening/Environment-and-network-programming-examples: 环境和网络编程实例 (github.com)Environment-and…

【开题报告】基于SpringBoot的校园周边攻略平台的设计与实现

1.选题背景 随着大学生活的日益丰富多彩&#xff0c;校园周边的商业和文化活动也越来越丰富。然而&#xff0c;对于新生或者外地来的同学来说&#xff0c;熟悉和了解校园周边的各种信息是一件比较困难的事情。因此&#xff0c;本项目旨在开发一个校园周边攻略平台&#xff0c;…

git drop掉的commit如何找回

在 Git 中&#xff0c;如果你执行了 git reset 或 git commit --amend 等操作&#xff0c;可能会导致某些 commit 被 "drop"&#xff0c;也就是不再直接可见。这些 commit 通常会被 Git 的垃圾收集机制&#xff08;garbage collection&#xff09;删除&#xff0c;但…

C++智能指针[下](shared_ptr/weak_ptr/循环引用/删除器)

文章目录 4.智能指针[shared_ptr]4.1设计理念成员属性 4.2主要接口拷贝构造 4.3引用计数线程安全问题测试线程安全通过对计数引用的加锁保护使得类线程安全类实例化的对象使用时需要手动加锁保护 "锁"的引进线程引用传参问题 4.4整体代码 5.循环引用问题5.1问题的引入…

【adb】adb相关命令行及adb传输文件权限问题 remote couldn‘t create file: Read-only file system

adb传输文件权限问题 今天用adb push的时候&#xff0c;报错说并非root权限 remote couldnt create file: Read-only file system 以下是adb相关命令一、非root权限解决方案 1️⃣运行以下命令行 adb root adb remount2️⃣如果还报错&#xff0c;则运行以下命令行 adb disab…

项目管理中,如何建立里程碑式管理?

项目进度控制是项目管理中的重要环节&#xff0c;也是最具挑战性的工作之一。在项目管理中&#xff0c;项目进度失控受到多种因素的影响&#xff0c;导致项目失控。 为了解决这个问题&#xff0c;我们可以借鉴在旅途中学到的经验&#xff0c;通过设立里程碑来了解项目进度&am…

MSQL系列(九) Mysql实战-Join算法底层原理

Mysql实战-Join算法底层原理 前面我们讲解了BTree的索引结构&#xff0c;及Mysql的存储引擎MyISAM和InnoDB,今天我们来详细讲解下Mysql的查询连接Join的算法原理 文章目录 Mysql实战-Join算法底层原理1.Simple Nested-Loop Join 简单嵌套循环2.Block Nested-Loop Join 块嵌套…

CDN技术(1)

1. CDN简介 CDN 是构建在数据网络上的一种分布式的内容分发网。 CDN 的作用是采用流媒体服务器集群技术&#xff0c;克服单机系统输出带宽及并发能力不足的缺点&#xff0c;可极大提升系统支持的并发流数目&#xff0c;减少或避免单点失效带来的不良影响。 2. CDN作用 CDN 利…

list列表前端分页功能已经提交list时容易犯错的问题回顾

最近在开发中&#xff0c;有返回list需要前端分页的&#xff0c;而且后续还需提交整个list&#xff0c;虽说前端分页并不难&#xff0c;但还有会有一些问题&#xff1a; 从图片代码就可以很清晰的看到前端分页&#xff0c;如何点击页数翻页的&#xff0c;很简单&#xff0c;但…

javascript判断对象中是否存在某个字段

1. in 如果指定的属性在指定的对象或其原型链中&#xff0c;则 in 运算符返回 true。 const car { make: Honda, model: Accord, year: 1998 };console.log(make in car); // truedelete car.make; if (make in car false) {car.make Suzuki; }console.log(car.make); //…

2024通信保研-电磁场电磁波复习

标量场的梯度的旋度恒等于0&#xff0c;旋度的散度等于0。 旋度&#xff1a; rot ⁡ F ( e x ∂ ∂ x e y ∂ ∂ y e z ∂ ∂ z ) ( e x F x e y F y e z F z ) e x ( ∂ F z ∂ y − ∂ F y ∂ z ) e y ( ∂ F x ∂ z − ∂ F z ∂ x ) e x ( ∂ F y ∂ x − ∂ F x …

MS COCO数据集的评价标准以及不同指标的选择推荐(AP、mAP、MS COCO、AR、@、0.5、0.75、1、目标检测、评价指标)

目标检测模型性能衡量指标、MS COCO 数据集的评价标准以及不同指标的选择推荐 0. 引言 0.1 COCO 数据集评价指标 目标检测模型通过 pycocotools 在验证集上会得到 COCO 的评价列表&#xff0c;具体参数的含义是什么呢&#xff1f; 0.2 目标检测领域常用的公开数据集 PASCAL …

网络基础知识

1.什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2.OSI 参考模型的层次是什么? 有 7 个 OSI 层&#xff1a;物理层&#xff0c;数据链路层&#xff0c;网络层&#xff0c;传输层&#xff0c;会话层&#xff0c;表示层和…

04 文件管理

文件管理 文件和目录的创建 删除文件和目录 文件查找命令 文件的拷贝和移动 打包和压缩

关于癌细胞MR的几种类型,T1,T2,DCE,DWI,ADC

在癌细胞检测中&#xff0c;不同类型的磁共振成像&#xff08;MRI&#xff09;可以提供不同的信息&#xff0c;有助于医生更全面地评估肿瘤的特性和生长情况。 T1加权图像&#xff08;T1-Weighted Imaging&#xff09;: 目的&#xff1a;T1加权图像通过优化对组织的对比度&…