专栏首页极客起源微信小程序开发实战(9):单行输入和多行输入组件

微信小程序开发实战(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组件

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python编程思想(23):类和对象

    类是面向对象的核心组成部分,类是一种自定义类型,并且可以将类作为变量的类型、以及函数参数和返回值的类型。

    蒙娜丽宁
  • 微信小程序开发实战(16):交互组件

    iOS程序员一定对ActionSheet非常熟悉,这是Cocoa Touch很常用的UI组件。使用ActionSheet会从当前窗口底部往上弹出一个窗口,可以在...

    蒙娜丽宁
  • Python编程思想(19):可变参数也可以这样玩

    很多编程语言都允许定义个数可变的参数,这样可以在调用函数时传入任意多个参数。Python当然也不例外,Python允许在形参前面添加一个星号(*),这样就意味着...

    蒙娜丽宁
  • B-Tree和B+tree

    B树是为了磁盘或者其他存储设备而设计的一种多叉平衡查找树,相对于二叉树,B树的每个内节点有多个分支,即多叉。

    用户7657330
  • Struts2 S2-020在Tomcat 8下的命令执行分析

    作者 yiran4827 Struts S2-020这个通告已经公布有一段时间了。目前大家都知道这个漏洞可以造成DOS、文件下载等危害,相信各大厂商也已经采取了...

    FB客服
  • Java三目运算

    版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/47...

    Hankkin
  • 用不到 30 行 Python 代码实现 YOLO

    "You Only Look Once"是一个实时对象检测算法,它避免了在生成区域建议上花费太多的时间。它不能完美地定位物体,而是优先考虑速度和识别。

    AI研习社
  • C语言数组,指针小案例

    用户4645519
  • 解决 CentOS 在 mariadb 数据库服务因某些原因自动关闭后,服务重启的配置方法

    一台运行数年的 centos 服务器,发生了一次 解决 mariadb 服务自动关闭的情况。我当时不以为意,直接运行 systemctl start maria...

    FungLeo
  • Grid R-CNN解读:商汤最新目标检测算法

    Grid R-CNN是商汤科技最新发表于arXiv的一篇目标检测的论文,对Faster R-CNN架构的目标坐标回归部分进行了替换,取得了更加精确的定位精度,是...

    CV君

扫码关注云+社区

领取腾讯云代金券