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

2020-09-27

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

input

輸入框。

屬性名	類型	默認(rèn)值	說明	最低版本
value	String		輸入框的初始內(nèi)容
type	String	"text"	input 的類型
password	Boolean	false	是否是密碼類型
placeholder	String		輸入框?yàn)榭諘r(shí)占位符
placeholder-style	String		指定 placeholder 的樣式
placeholder-class	String	"input-placeholder"	指定 placeholder 的樣式類
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大輸入長(zhǎng)度，設(shè)置為 -1 的時(shí)候不限制最大長(zhǎng)度
cursor-spacing	Number	0	指定光標(biāo)與鍵盤的距離，單位 px 。取 input 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標(biāo)與鍵盤的距離
auto-focus	Boolean	false	(即將廢棄，請(qǐng)直接使用 focus )自動(dòng)聚焦，拉起鍵盤
focus	Boolean	false	獲取焦點(diǎn)
confirm-type	String	"done"	設(shè)置鍵盤右下角按鈕的文字	1.1.0
confirm-hold	Boolean	false	點(diǎn)擊鍵盤右下角按鈕時(shí)是否保持鍵盤不收起	1.1.0
bindinput	EventHandle		當(dāng)鍵盤輸入時(shí)，觸發(fā)input事件，event.detail = {value: value}，處理函數(shù)可以直接 return 一個(gè)字符串，將替換輸入框的內(nèi)容。
bindfocus	EventHandle		輸入框聚焦時(shí)觸發(fā)，event.detail = {value: value}
bindblur	EventHandle		輸入框失去焦點(diǎn)時(shí)觸發(fā)，event.detail = {value: value}
bindconfirm	EventHandle		點(diǎn)擊完成按鈕時(shí)觸發(fā)，event.detail = {value: value}

type 有效值：

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

confirm-type 有效值：

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

示例代碼：

<!--input.wxml-->
<view class="section">
    <input placeholder="這是一個(gè)可以自動(dòng)聚焦的input" auto-focus/>
</view>
<view class="section">
    <input placeholder="這個(gè)只有在按鈕點(diǎn)擊的時(shí)候才聚焦" focus="{{focus}}" />
    <view class="btn-area">
        <button bindtap="bindButtonTap">使得輸入框獲取焦點(diǎn)</button>
    </view>
</view>
<view class="section">
    <input  maxlength="10" placeholder="最大輸入長(zhǎng)度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ù)的兩個(gè)1會(huì)變成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ù)點(diǎn)的數(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);
      //計(jì)算光標(biāo)的位置
      pos = left.replace(/11/g,'2').length;
    }

    //直接返回對(duì)象，可以對(duì)輸入進(jìn)行過濾處理，同時(shí)可以控制光標(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 在聚焦時(shí)出現(xiàn)重影問題；
tip : input 組件是一個(gè) native 組件，字體是系統(tǒng)字體，所以無法設(shè)置 font-family；
tip : 在 input 聚焦期間，避免使用 css 動(dòng)畫；

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

第二部分：如何開通一個(gè)小商店