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

微信小程序提供了两种输入类型的输入框组件，分别是单行输入框 <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目前只能在真机上测试。

常用使用方法实例：

XML 复制代码

<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>

完整实现代码如下：

javascript 复制代码

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组件的基本用法实例：

javascript 复制代码

<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属性，该组件会随着行数的增加而变高。