本文編輯：  技術陽光群星瀏覽 7671 4 版權所有，嚴禁轉載

組件說明:

input 輸入框。

效果展示

屬性效果圖：

wxml

<view class="content">
type：有效值：text 感覺沒什么區別
<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

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

事件效果圖：

wxml

<view class="content">
bindinput="當內容改變"
<input  bindinput="bindinput"/>
bindfocus:當獲取焦點
<input  bindfocus="bindfocus"/>
bindblur：當失去焦點觸發
<input  bindblur="bindblur"/>
內容：
<view style="color:blue">
{{log}}
</view>

</view>

js

Page({
  data:{
    log:'事件觸發'
  },
  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內容改變.輸入框值="+value
    })
  },
  bindfocus:function(e){
    var value=e.detail.value;
     this.setData({
      log:"bindfocus獲取焦點.輸入框值="+value
    })
  }
})

wxss

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

組件屬性：

屬性解析：

wxml

<!--屬性：-->
<!--value：輸入框內容-->
<input value="內容"/>

<!--type：有效類型text，number,idcard,digit，小編感覺其他三個和text沒有明顯區別,不清楚是什么問題，正常number應該只允許輸入數字，但結果和text一樣-->
<input type="text"/>
<input type="number"/>
<input type="idcard"/>
<input type="digit"/>

<!--password：密碼格式 boolean需要{{}}表示-->
<input password="{{true}}"/>
<input password/>  等同于  <input password="{{false}}"/>

<!--placeholder：占位符，對輸入框內容提示-->
<input placeholder="占位符" placeholder-class="占位符靜態樣式"   placeholder-style="占位符動態樣式，可用{{}}進行動態賦值"/>

<!--disabled：控制標簽有效,或者失效狀態，在失效狀態，不能獲取該值-->
<input disabled="{{true}}"/>
<input disabled/> 等同于 <input disabled="{{false}}"/>

<!--maxlength:內容長度限制,默認140-->
<input  maxlength="100"/>
<input  maxlength/> 等同于 <input  maxlength="140"/>

<!--focus:初始化時，獲取輸入焦點(目前開發工具暫不支持)-->
<input  focus="{{true}}"/>
<input focus/> 等同于 <input focus="{{false}}"/>

<!--auto-focus：當界面只有一個input,自動獲取焦點-->
<input   auto-focus="{{true}}"/>
<input   auto-focus/> 等同于 <input auto-focus="{{false}}"/>

<!--事件：-->
<!--bindinput:當內容改動時觸發-->
<input bindinput="自己定義函數名">

<!--bindfocus:當獲取焦點，可用輸入狀態時觸發-->
<input bindfocus="自己定義函數名">

<!--bindblur：當失去焦點觸發-->
<input bindblur="自己定義函數名">