微信小程序输入框大全

结构部分 

<!--page/component/component-pages/input/input.wxml-->

<!--input.wxml-->

<view class="section">

  <input placeholder="这是一个可以自动聚焦的input" auto-focus/>

</view>

<view class="section">

  <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />

  <view class="btn-area">

    <button bindtap="bindButtonTap">使得输入框获取焦点</button>

  </view>

</view>

<view class="section">

  <input  maxlength="10" placeholder="最大输入长度10" />

</view>

<view class="section">

  <view class="section__title">你输入的是：{{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:green" placeholder="设置placeholder 的颜色" />

</view>

js部分

// page/component/component-pages/input/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){

      // 光标在中间

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

    }

  }

})