回复 刷新

暂无评论

微信小程序开发实战(9):单行输入和多行输入组件

1. 单行输入组件(input)

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

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

  1. value:String类型,输入框的内容
  2. placeholder:String类型,输入框为空时显示的文本
  3. placeholder-style:String类型,指定 placeholder 的样式
  4. placeholder-class:String类型,指定 placeholder 的样式类名称
  5. disabled:Boolean类型,默认值是false,是否禁用textarea组件
  6. maxlength:Number类型,默认值是140,最大输入长度,设置为0的时候不限制最大长度
  7. auto-focus:Boolean类型,默认值是false,用于自动聚焦,当获得焦点后,自动弹出软键盘,当前页面中只能有一个