微信小程序表單組件輸入框input,微信小程序獲取輸入框

2020-09-27

導(dǎo)讀：input 輸入框。屬性名類型默認(rèn)值說明最低版本 value String 輸入框的初始內(nèi)容 type String text input 的類型 password Boolean false 是否是密碼類型 placeholder String 輸入框為空時占位符 placeholder...

input

輸入框。

屬性名	類型	默認(rèn)值	說明	最低版本
value	String		輸入框的初始內(nèi)容
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	最大輸入長度，設(shè)置為 -1 的時候不限制最大長度
cursor-spacing	Number	0	指定光標(biāo)與鍵盤的距離，單位 px 。取 input 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標(biāo)與鍵盤的距離
auto-focus	Boolean	false	(即將廢棄，請直接使用 focus )自動聚焦，拉起鍵盤
focus	Boolean	false	獲取焦點
confirm-type	String	"done"	設(shè)置鍵盤右下角按鈕的文字	1.1.0
confirm-hold	Boolean	false	點擊鍵盤右下角按鈕時是否保持鍵盤不收起	1.1.0
bindinput	EventHandle		當(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}
bindconfirm	EventHandle		點擊完成按鈕時觸發(fā)，event.detail = {value: value}

type 有效值：

值	說明
text	文本輸入鍵盤
number	數(shù)字輸入鍵盤
idcard	身份證輸入鍵盤
digit	帶小數(shù)點的數(shù)字鍵盤

confirm-type 有效值：

值	說明
send	右下角按鈕為“發(fā)送”
search	右下角按鈕為“搜索”
next	右下角按鈕為“下一個”
go	右下角按鈕為“前往”
done	右下角按鈕為“完成”

示例代碼：

<!--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 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-style="color:red" placeholder="占位符字體是紅色的" />
</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){
      //光標(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'),
  }
})

微信小程序表單組件輸入框input,微信小程序獲取輸入框

Bug & Tip

bug : 微信版本6.3.30, focus 屬性設(shè)置無效；
bug : 微信版本6.3.30, placeholder 在聚焦時出現(xiàn)重影問題；
tip : input 組件是一個 native 組件，字體是系統(tǒng)字體，所以無法設(shè)置 font-family；
tip : 在 input 聚焦期間，避免使用 css 動畫；

更多微信小程序開發(fā)教程，可以關(guān)注hi小程序。

第二部分：如何開通一個小商店