微信小程序輸入框input

微信小程序輸入框input

屬性名 類型 默認(rèn)值 說明

value String 輸入框的內(nèi)容

type String text input的類型，有效值：text,number,idcard,digit,time,date

password Boolean false 是否是密碼類型

placeholder String 輸入框為空時占位符

placeholder-style String 指定placeholder的樣式

placeholder-class String input-placeholder 指定placeholder的樣式類

disabled Boolean false 是否禁用

maxlength Number 140 最大輸入長度，設(shè)置為0的時候不限制最大長度

auto-focus Boolean false 自動聚焦，拉起鍵盤。頁面中只能有一個input設(shè)置auto-focus屬性

focus Boolean false 使得input獲取焦點

bindchange EventHandle 輸入框失去焦點時，觸發(fā)bindchange事件，event.detail={value:value}

bindinput EventHandle 除了date/time類型外的輸入框，當(dāng)鍵盤輸入時，觸發(fā)input事件，event.detail={value:value}，處理函數(shù)可以直接return一個字符串，將替換輸入框的內(nèi)容。

bindfocus EventHandle 輸入框聚焦時觸發(fā)，event.detail = {value:value}

bindblur EventHandle 輸入框失去焦點時觸發(fā)，event.detail = {value:value}

<!--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="連續(xù)的兩個1會變成2" />

</view>

<view class="section">

    <input  bindinput="bindHideKeyboard" placeholder="輸入123自動收起鍵盤" />

</view>

<view class="section">

    <input type="emoji" placeholder="這是一個帶有表情的輸入框" />

</view>

<view class="section">

    <input password type="number" />

</view>

<view class="section">

    <input password type="text" />

</view>

<view class="section">

    <input type="digit" placeholder="帶小數(shù)點的數(shù)字鍵盤"/>

</view>

<view class="section">

    <input type="idcard" placeholder="×××輸入鍵盤" />

</view>

<view class="section">

    <input placeholder- placeholder="占位符字體是紅色的" />

</view>

//input.js

Page({

  data:{

    focus:false,

    inputValue:""

  },

  bindButtonTap:function(){

    this.setData({

      focus:Date.now()

    })

  },

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

      //光標(biāo)在中間

      var left = e.detail.value.slice(0,pos);

      //計算光標(biāo)的位置

      pos = left.replace(/11/g,'2').length;

    }

    //直接返回對象，可以對輸入進(jìn)行過濾處理，同時可以控制光標(biāo)的位置

    return {

      value:value.replace(/11/g,'2'),

      cursor:pos

    }

    //或者直接返回字符串,光標(biāo)在最后邊

    //return value.replace(/11/g,'2'),

  },

  bindHideKeyboard:function(e){

    if(e.detail.value === "123"){

      //收起鍵盤

      wx.hideKeyboard();

    }

  }

})