注冊

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

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

input

微信小程序表單組件輸入框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

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

 

更多微信小程序開發(fā)教程,可以關(guān)注hi小程序。
重磅推薦:小程序開店目錄

第一部分:小商店是什么

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

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)