WeChat Open Platform

Mini Programs Documentation

input

Input box

Attribute name Type Default value Description Minimum version
value String Initial content of input box
type String "text" input type
password Boolean false Whether is password type
placeholder String Placeholder when input box is empty
placeholder-style String Specified placeholder style
placeholder-class String "input-placeholder" Specified placeholder style type
disabled Boolean false Whether disabled
maxlength Number 140 Maximum input length, maximum length not restricted when set as -1
cursor-spacing Number 0 Specified distance between cursor and keyboard, unit px. The minimum value obtained for the distance between the input and the bottom and the specified cursor-spacing distance serves as the distance between cursor and keyboard.
auto-focus Boolean false (About to become obsolete, please use focus directly) Automatic focus, pull keyboard up
focus Boolean false Gets focus
confirm-type String "done" Sets text on button in bottom right corner of keyboard {%version('1.1.0')%}
confirm-hold Boolean false Whether keyboard remains unhidden when button in bottom right corner of keyboard is tapped
bindinput EventHandle input event triggered during keyboard input, event.detail = {value: value }, processing function can return a string directly, input box content will be replaced
bindfocus EventHandle Triggered during input box focus, event.detail = {value: value}
bindblur EventHandle Triggered when input box loses focus, event.detail = {value: value}
bindconfirm EventHandle Triggered when Done button tapped, event.detail = {value: value}  

type valid values:

Value Description
Text Text input keyboard
number Number input keyboard
idcard ID card input keyboard
digit Digit keyboard with decimal points

confirm-type valid values:

Value Description
send Button in bottom right corner is Send
search Button in bottom right corner is Search
next Button in bottom right corner is Next
go Button in bottom right corner is Go
done Button in bottom right corner is Done

Sample code:

<!--input.wxml-->
<view class="section">
  <input placeholder="This is an input that can be automatically focused" auto-focus/>
</view>
<view class="section">
  <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />
  <view class="btn-area">
    <button bindtap="bindButtonTap">Make input box get focus</button>
  </view>
</view>
<view class="section">
  <input  maxlength="10" placeholder="最大输入长度10" />
</view>
<view class="section">
  <view class="section__title">You have inputted: {{inputValue}}</view>
  <input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>
<view class="section">
  <input  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
</view>
<view class="section">
  <input  bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
</view>
<view class="section">
  <input password type="number" />
</view>
<view class="section">
  <input password type="text" />
</view>
<view class="section">
  <input type="digit" placeholder="带小数点的数字键盘"/>
</view>
<view class="section">
  <input type="idcard" placeholder="身份证输入键盘" />
</view>
<view class="section">
  <input placeholder-style="color:red" placeholder="Placeholder font is red" />
</view>
//input.js
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){
      //Cursor is in the middle
      var left = e.detail.value.slice(0,pos)
      //Calculates cursor position
      pos = left.replace(/11/g,'2').length
    }

    //Directly returns objects, can filter input at the same time as controlling cursor position
    return {
      value: value.replace(/11/g,'2'),
      cursor: pos
    }

    //Or directly returns strings, cursor is at the very end
    //return value.replace(/11/g,'2'),
  },
  bindHideKeyboard: function(e) {
    if (e.detail.value === '123') {
      //Hide keyboard
      wx.hideKeyboard()
    }
  }
})

input

Bugs & Tips

  1. bug: focus attribute settings are ineffective in WeChat version 6.3.30.
  2. bug: Ghosting problem occurs when placeholder is being focused in WeChat version 6.3.30.
  3. tip: The input component is a native component. It uses the system font, so font-family cannot be set.
  4. tip: Avoid using css animation while input is being focused.