微信小程序开发实战（9）：单行输入和多行输入组件

淩亂°似流年 2023-02-26 07:25 75阅读 0赞

\-----------支持作者请转发本文-----------

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所示。

![format_png][]

图1  input显示效果

在布局代码中，通过bindinput事件校验用的输入，如果输入close，则关闭键盘（需要在真机上测试，模拟器不支持软键盘）。input还支持几种输入类型，如数字、身份证、表情等，这些输入类型，并不是指不能输入其他的字符，而是指软键盘的乐行，例如，数字输入类型，弹出的是输入输入键盘（只包含10个数字键和其他几个字符的软键盘）。图2是弹出的身份证输入类型（左下角多了一个x键，和数字键盘类似）。

![format_png 1][]

图2  身份证键盘

图3是输入表情的软键盘。

![format_png 2][]

图3  输入表情的软键盘

图4是弹出的默认软键盘。

![format_png 3][]

图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所示。

![format_png 4][]

图5 textarea的显示效果

如果在第一个textarea组件中不断输入新行，那么textarea组件的高度会不断增加，效果如图6所示。

![format_png 5][]

图6 不断增加新行的textarea组件

往期回顾：

[微信小程序开发实战（6）：基础组件（text、icon和progress）][6_text_icon_progress]

[微信小程序开发实战（7）：Button组件详解][7_Button]

[微信小程序开发实战（8）：可与其他组件绑定的文本组件（label）][8_label]

\-----------支持作者请转发本文-----------

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 6][]

关注  极客起源  公众号，获得更多免费技术视频和文章。

![format_png 7][]

[format_png]: /images/20230209/e8a9ae21bc704eae87a250dac0ab8a2f.png
[format_png 1]: /images/20230209/13adab2f8f0c4f50b4522479288c11d1.png
[format_png 2]: /images/20230209/730005e34b424474a665b86f06a114e7.png
[format_png 3]: /images/20230209/aab6e961ead94d17bfc03fe9112d529f.png
[format_png 4]: /images/20230209/2a891b91088b4ceb815ea4c27d7354a3.png
[format_png 5]: /images/20230209/fd5752b193784c06ac72be48558aa88b.png
[6_text_icon_progress]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6903018a1e8a1759f9e327f56247d374513bcca93b53affca96ffc2f60da2513a1aca76a32&idx=1&mid=2651364855&scene=21&sn=1633e82e25441596c052eee6f4b0501c#wechat_redirect
[7_Button]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6900f58a1e89e3786e06e5b9b532ba016f954e69f2dbf2b97ae82b9e8875a403713992e46a&idx=1&mid=2651364867&scene=21&sn=3cfb4e9162c17abd266f52a01d725c3e#wechat_redirect
[8_label]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6900f98a1e89ef77c46cf54062f1e1626625522e70cc7b295a91bad1d6c9d308361b464e34&idx=1&mid=2651364879&scene=21&sn=f8ea1a5c07146ace992c44730376ee1f#wechat_redirect
[format_png 6]: /images/20230209/8b2bf42233984deeb61ea62600e8ee2d.png
[format_png 7]: /images/20230209/06f0ac0bdda84a3881442b7fe92522a2.png