本文介紹input 輸入框的各種參數(shù)及特性。

input輸入框示例代碼運行效果如下：

下面是WXML代碼：

[XML]

<view class="content">
type：有效值：text 感覺沒什么區(qū)別
<input  placeholder="type=text" type="text" value="" />
<input  placeholder="type=number" type="number" value="" />
<input  placeholder="type=idcard" type="idcard" value="" />
<input  placeholder="type=digit" type="digit" value="" />
password：
<input   type="text" password="{{false}}" placeholder="請輸入密碼"/>
<input   type="text" password="{{true}}" placeholder="請輸入密碼"/>
placeholder：
<input  placeholder="占位符" />
disable:
<input  placeholder="disable={{false}}" disabled='{{false}}'/>
<input  placeholder="disable={{true}}" disabled='{{true}}'/>
最大長度：
<input   maxlength="10" placeholder="maxlength='10'最多長度10字符"/>
<input   maxlength="5" placeholder="maxlength='5'最多長度5字符"/>
<input   maxlength="-1"  placeholder="值為-1，則不限制長度"/>
</view>

下面是WXSS代碼：

[JavaScript]

.content{
  border:1px black solid;
  margin: 10px;
  font-size: 10pt;
  padding: 5px;
}
input{
  border:1px red solid;
margin: 5px;
}

下面是WXML代碼：

[XML]

<view class="content">
bindinput="當(dāng)內(nèi)容改變"
<input  bindinput="bindinput"/>
bindfocus:當(dāng)獲取焦點
<input  bindfocus="bindfocus"/>
bindblur：當(dāng)失去焦點觸發(fā)
<input  bindblur="bindblur"/>
內(nèi)容：
<view style="color:blue">
{{log}}
</view>
</view>

下面是JS代碼：

[JavaScript]

Page({
  data:{
    log:'事件觸發(fā)'
  },
  bindblur:function(e){
    var value=e.detail.value;
    this.setData({
      log:"bindblur失去焦點.輸入框值="+value
    })
  },
  bindinput:function(e){
    var value=e.detail.value;
    this.setData({
      log:"bindinput內(nèi)容改變.輸入框值="+value
    })
  },
  bindfocus:function(e){
    var value=e.detail.value;
    this.setData({
      log:"bindfocus獲取焦點.輸入框值="+value
    })
  }
})

下面是WXSS代碼：

[JavaScript]

.content{
  border:1px black solid;
  margin: 10px;
  font-size: 10pt;
  padding: 5px;
}
input{
  border:1px red solid;
margin: 5px;
}

組件屬性：

屬性解析：

下面是WXML代碼：

[XML]

<!--屬性：-->
<!--value：輸入框內(nèi)容-->
<input value="內(nèi)容"/>
<!--type：有效類型text，number,idcard,digit，小編感覺其他三個和text沒有明顯區(qū)別,不清楚是什么問題，正常number應(yīng)該只允許輸入數(shù)字，但結(jié)果和text一樣-->
<input type="text"/>
<input type="number"/>
<input type="idcard"/>
<input type="digit"/>
<!--password：密碼格式 boolean需要{{}}表示-->
<input password="{{true}}"/>
<input password/>  等同于  <input password="{{false}}"/>
<!--placeholder：占位符，對輸入框內(nèi)容提示-->
<input placeholder="占位符" placeholder-class="占位符靜態(tài)樣式"   placeholder-style="占位符動態(tài)樣式，可用{{}}進行動態(tài)賦值"/>
<!--disabled：控制標簽有效,或者失效狀態(tài)，在失效狀態(tài)，不能獲取該值-->
<input disabled="{{true}}"/>
<input disabled/> 等同于 <input disabled="{{false}}"/>
<!--maxlength:內(nèi)容長度限制,默認140-->
<input  maxlength="100"/>
<input  maxlength/> 等同于 <input  maxlength="140"/>
<!--focus:初始化時，獲取輸入焦點(目前開發(fā)工具暫不支持)-->
<input  focus="{{true}}"/>
<input focus/> 等同于 <input focus="{{false}}"/>
<!--auto-focus：當(dāng)界面只有一個input,自動獲取焦點-->
<input   auto-focus="{{true}}"/>
<input   auto-focus/> 等同于 <input auto-focus="{{false}}"/>
<!--事件：-->
<!--bindinput:當(dāng)內(nèi)容改動時觸發(fā)-->
<input bindinput="自己定義函數(shù)名">
<!--bindfocus:當(dāng)獲取焦點，可用輸入狀態(tài)時觸發(fā)-->
<input bindfocus="自己定義函數(shù)名">
<!--bindblur：當(dāng)失去焦點觸發(fā)-->
<input bindblur="自己定義函數(shù)名">

以上就是微信小程序組件解讀和分析之input輸入框的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！