input

输入框。

效果展示

示例代码

WXML

<view class="page">
    <view class="page__hd">
        <text class="page__title">input</text>
        <text class="page__desc">输入框</text>
    </view>
    <view class="page__bd">
        <view class="section">
            <view>value</view>
            <input placeholder="value" value="string" />
            <input placeholder="value" value="1" />
            <input placeholder="value" value="{{true}}" />
        </view>
        <view>type</view>
        <view class="section">
            <input type="text" placeholder="这是一个文本输入框" />
        </view>
        <view class="section">
            <input type="number" placeholder="这是一个数字输入框" />
        </view>

        <view>type</view>
        <view class="section">
            <input password="{{true}}"  placeholder="这是一个密码输入框" />
        </view>
        <view class="section">
            <input password="{{false}}"  placeholder="这不是一个密码输入框" />
        </view>
        <view class="section">
            <input password placeholder="这是一个密码输入框" />
        </view>
        <view class="section">
            <input password type="number" placeholder="这是一个密码输入框" />
        </view>
        
        <view>placeholder-style</view>
        <view class="section">
            <input placeholder-style="color:red;font-size:20px;" cursor-spacing="10" placeholder="占位符字体是红色的" />
        </view>
        <view class="section">
            <input placeholder-class="input-placeholder"  placeholder="占位符默认样式" />
        </view>
        <view class="section">
            <input placeholder-class="my-input-placeholder"  placeholder="占位符样式" />
        </view>

        <view>disabled</view>
        <view class="section">
            <input type="text" disabled placeholder="这是一个禁用输入框" />
        </view>
        <view class="section">
            <input type="text" disabled="{{true}}" placeholder="这是一个禁用输入框" />
        </view>
        <view class="section">
            <input type="text" disabled="{{false}}" placeholder="这不是一个禁用输入框" />
        </view>

        <view>maxlength</view>
        <view class="section">
            <input  maxlength="10" placeholder="最大输入长度10" />
        </view>
        <view class="section">
            <input  maxlength="-1" placeholder="不限制最大输入长度" />
        </view>

        <view>bindinput--{{e_input}}</view>
        <view class="section">
            <view class="section__title">你输入的是：{{inputValue}}</view>
            <input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>
        </view>

        <view>bindfocus--{{e_focus}}</view>
        <view class="section">
            <input bindfocus="bindfocus" placeholder="聚焦了" />
        </view>         

        <view>bindblur--{{e_blur}}</view>
        <view class="section">
            <input  bindblur="bindblur" placeholder="失去焦点" />
        </view>
    </view>
</view>

JS

Page({
  data:{
    focus:false,
    inputValue:"",
    e_focus: 'e_focus',
    e_blur: 'e_blur',
    e_confirm: 'e_confirm',
    e_keyboardheightchange: 'e_keyboardheightchange',
    e_input: 'e_input'

  },
  bindButtonTap:function(){
    this.setData({
      focus:true
    })
  },
  bindKeyInput:function(e){
    this.setData({
      inputValue:e.detail.value,
      e_input: JSON.stringify(e.detail)
    })
  },
  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(/11/g,'2').length;
    }

    //直接返回对象，可以对输入进行过滤处理，同时可以控制光标的位置
    return {
      value:value.replace(/11/g,'2'),
      cursor:pos
    }

    //或者直接返回字符串,光标在最后边
    //return value.replace(/11/g,'2'),
  },
  bindHideKeyboard:function(e){
    if(e.detail.value === "123"){
      //收起键盘
      wx.hideKeyboard();
    }
  },
  bindfocus(event){
    console.log("聚焦了", event.detail);
    this.setData({
      e_focus: JSON.stringify(event.detail)
    })
  },
  bindblur(event){
    console.log("失去焦点", event.detail);
    this.setData({
      e_blur: JSON.stringify(event.detail)
    })
  },
  bindconfirm(event) {
    console.log("confirm", event.detail);
    this.setData({
      e_confirm: JSON.stringify(event.detail)
    })
  },
  bindkeyboardheightchange(event) {
    console.log("keyboardheightchange", event.detail);
    this.setData({
      e_keyboardheightchange: JSON.stringify(event.detail)
    })
  }
})

WXSS

.my-input-placeholder {
    color: green;
}

API

属性	类型	默认值	必填	说明
value	string		否	输入框的初始内容
type	string	text	否	input 的类型
password	boolean	false	否	是否是密码类型
placeholder	string		否	输入框为空时占位符
placeholder-style	string		否	指定 placeholder 的样式
placeholder-class	string	input-placeholder	否	指定 placeholder 的样式类
disabled	boolean	false	否	是否禁用
maxlength	number	140	否	最大输入长度，设置为 -1 的时候不限制最大长度
confirm-hold	boolean	false	否	点击键盘右下角按钮时是否保持键盘不收起
bindinput	eventhandle		否	键盘输入时触发，event.detail = {value, cursor}
bindfocus	eventhandle		否	输入框聚焦时触发，event.detail = { value }
bindblur	eventhandle		否	输入框失去焦点时触发，event.detail = {value: value}

• 若password为true，type设置无效

type 的合法值

值	说明
text	文本输入键盘
number	数字输入键盘

多平台支持

属性	支持平台
value	支付宝
type	支付宝
password	支付宝
placeholder	支付宝
placeholder-style	支付宝
placeholder-class	支付宝
disabled	支付宝
maxlength	支付宝
confirm-hold	支付宝
bindinput	支付宝
bindfocus	支付宝
bindblur	支付宝

注释：

number类型在支付宝开发工具中无效，在真机会弹出定制数字键盘，支付宝input组件的type属性为非法值时会弹出数字键盘，confirm-hold为非boolean时，默认false