微信小程序开发实战(9):单行输入和多行输入组件
-----------支持作者请转发本文-----------
1. 单行输入组件(input)
input组件用于录入单行文本,尽管input的基本功能是文本录入,但该组件的属性还是比较多的,也比较复杂。下面是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:red" placeholder="占位符字体是红色的" auto-focus/><input style="margin-top:20px" placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" /><button bindtap="bindButtonTap">使得输入框获取焦点(在真机上测试)</button><input style="margin-top:20px" maxlength="5" placeholder="最大输入长度5" /><view style="margin-top:20px">你输入的是:{{inputValue}}</view><input bindinput="bindKeyInput" placeholder="输入同步到view中" /><input style="margin-top:20px" bindinput="bindReplaceInput" placeholder="将<和>进行转义" /><input style="margin-top:20px" bindinput="bindHideKeyboard" placeholder="输入close自动收起键盘" /><input style="margin-top:20px" type="emoji" placeholder="这是一个带有表情的输入框" /><input type="digit" placeholder="带小数点的数字键盘" /><input type="idcard" placeholder="身份证输入键盘" /><input password="true" placeholder="请输入密码" />
</view>
显示的效果如图1所示。
图1 input显示效果
在布局代码中,通过bindinput事件校验用的输入,如果输入close,则关闭键盘(需要在真机上测试,模拟器不支持软键盘)。input还支持几种输入类型,如数字、身份证、表情等,这些输入类型,并不是指不能输入其他的字符,而是指软键盘的乐行,例如,数字输入类型,弹出的是输入输入键盘(只包含10个数字键和其他几个字符的软键盘)。图2是弹出的身份证输入类型(左下角多了一个x键,和数字键盘类似)。
图2 身份证键盘
图3是输入表情的软键盘。
图3 输入表情的软键盘
图4是弹出的默认软键盘。
图4 默认的软键盘
完整的实现代码如下:
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有如下几个属性。
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组件的基本用法,由于第一个textarea组件设置了auto-height属性,所以该组件会随着行数的增加而变高。
<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>
布局的显示效果如图5所示。
图5 textarea的显示效果
如果在第一个textarea组件中不断输入新行,那么textarea组件的高度会不断增加,效果如图6所示。
图6 不断增加新行的textarea组件
往期回顾:
微信小程序开发实战(6):基础组件(text、icon和progress)
微信小程序开发实战(7):Button组件详解
微信小程序开发实战(8):可与其他组件绑定的文本组件(label)
-----------支持作者请转发本文-----------
对本文感兴趣,可以加李宁老师微信公众号(unitymarvel):
关注 极客起源 公众号,获得更多免费技术视频和文章。
微信小程序开发实战(9):单行输入和多行输入组件相关推荐
- 《微信小程序开发实战》课后题
黑马程序员版<微信小程序开发实战> 第一章 填空题 1.微信小程序可以通过________方式打开. 答案:扫描二维码 2.微信开发者工具中的上传是指将代码上传到________. 答案: ...
- 视频教程-微信小程序开发实战之番茄时钟开发-微信开发
微信小程序开发实战之番茄时钟开发 4年web前后端开发经验,熟悉PHP,Python后端技术,熟悉基于Lnmp环境的项目开发和部署,擅长Yii,ThinkPHP,CI,Django,Flask等国内外 ...
- JEECG社区微信小程序开发实战-张代浩-专题视频课程
JEECG社区微信小程序开发实战-511人已学习 课程介绍 微信小程序开发培训,包含环境搭建.实例讲解.对接支付功能等课题. 课程收益 微信小程序开发培训,包含环境搭建.实例讲 ...
- 微信小程序python入门教程-2020Python+微信小程序开发实战(视频+课件)
本套课程出自老男孩IT教程的Python+微信小程序开发实战官网售价79元,课程基于微信小程序平台开发的的拍卖系统.课程分为4个章节微信小程序快速入门用微信小程序快速开发认证和发布动态模块,第二章拍卖 ...
- 微信小程序开发实战课程之油耗计算器-耿广龙-专题视频课程
微信小程序开发实战课程之油耗计算器-3406人已学习 课程介绍 微信小程序开发实战课程之油耗计算器,通过练习开发工具类的油耗计算器小程序,可以帮助大家了解微信小程序的API,相关组件的 ...
- 王者级微信小程序开发实战教学 从零到高手搭建微信小程序框架开发教程
王者级微信小程序开发实战教学 从零到高手搭建微信小程序框架开发教程 小程序进阶 王者级微信小程序开发实战教学课程,讲师手把手对同学们进行微信小程序开发的进阶实战,从零开始搭建,从本地到云端开始系统化的 ...
- 微信小程序|开发实战篇之二
开发实战篇之二 前言 1.零碎知识点和优化点 1.1 ES6模板字符串 1.2 ES6扩展运算符 1.3 独立更新like组件状态 1.4 自定义组件支持hidden 2.音乐music组件开发 2. ...
- 微信小程序|开发实战篇之三
开发实战篇之三 前言 1.使用Promise获取多个异步方法的结果 2.高阶组件-search 2.1 search组件的基本结构 2.1.1 search组件的骨架index.wxml文件 2.1. ...
- 微信小程序开发实战指南
微信小程序是一种快速开发并在微信平台上发布的应用程序.它可以在微信内部直接运行,无需安装,具有开发周期短.便于传播.用户量大等优点.本文将从入门到精通的角度,介绍微信小程序的开发流程.技术架构和实战经 ...
最新文章
- 如何在JavaScript中切片和拼接数组
- Netty实战 IM即时通讯系统(五)客户端启动流程
- java怎么输出9 99的形式_java如何输出99乘法表
- Android GridView,recycleview,栅格布局
- Linux 内核宏 time_after解析
- Spring JDK动态代理
- 应急照明市电检测_应急照明供电及接线(图析)
- linux nuc 吗 支持_在你的树莓派家庭实验室中使用 Cloudinit | Linux 中国
- 机器视觉中使用光源及偏振镜解决物体反光问题
- 微信小程序电商实战-商品详情加入购物车(下)
- 【机器学习】Cross-Validation(交叉验证)详解
- python中常见的三种选择结构_循序渐进学Python:三种选择语句
- matlab图像处理教学视频,MATLAB图像处理实例详解视频教程
- 全国计算机三级嵌入式资料
- ALOS 12.5米精度DEM数据下载与处理
- 大数据创业的门槛到底有哪些?
- 安装ANSYS、SolidWorks、MATLAB等软件出错解决办法汇总(此大乘佛法可解决99.9%的问题)
- 如何在线批量将JPG图片转Word文件
- http://www.2cto.com/ 红黑联盟
- 转载:医疗保险,公积金、养老、生育、工伤、失业保险
热门文章
- 德语语法笔记——动词的变位
- Python去水印操作
- gwen语音课_想学习Vuetify? 这是Gwen Faraday的免费15部分课程
- PTA 7-13 列车调度 (25 分) C语言和C++实现(二分查找)
- 【多任务模型】腾讯MFH《Multi-Faceted Hierarchical Multi-Task Learning for a Large Number of Tasks
- 国家c语言二级机试题,国家二级计算机考试题目C语言机试题库.doc
- 业余时间决定了你的人生
- 无线路由器服务器名怎么设置,服务器改无线路由器怎么设置
- scanf_s 用法
- 根据TXT文件中的文件名复制文件