小編給大家分享一下微信小程序中input輸入框組件有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司擁有10余年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供成都網(wǎng)站設(shè)計、做網(wǎng)站服務(wù)，對于網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、App定制開發(fā)、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、主機(jī)域名等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗(yàn)，集策劃、開發(fā)、設(shè)計、營銷、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。

input輸入框組件說明:

input輸入框示例代碼運(yùn)行效果如下：

下面是WXML代碼：

[XML]

type：有效值：text 感覺沒什么區(qū)別




password：


placeholder：

disable:


較大長度：

下面是WXSS代碼：

[JavaScript]

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

下面是WXML代碼：

[XML]

bindinput="當(dāng)內(nèi)容改變"

bindfocus:當(dāng)獲取焦點(diǎn)

bindblur：當(dāng)失去焦點(diǎn)觸發(fā)

內(nèi)容：

{{log}}

下面是JS代碼：

[JavaScript]

Page({
  data:{
    log:'事件觸發(fā)'
  },
  bindblur:function(e){
    var value=e.detail.value;
    this.setData({
      log:"bindblur失去焦點(diǎn).輸入框值="+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獲取焦點(diǎn).輸入框值="+value
    })
  }
})

下面是WXSS代碼：

[JavaScript]

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

組件屬性：

屬性	描述	類型	默認(rèn)值
value	輸入框的初始內(nèi)容	String
type	有效值：text, number, idcard, digit	String	text
password	是否是密碼類型	Boolean	false
placeholder	輸入框?yàn)榭諘r占位符	String
placeholder-style	指定 placeholder 的樣式	String
placeholder-class	指定 placeholder 的樣式類	String	input-placeholder
disabled	是否禁用	Boolean	false
maxlength	較大輸入長度， 設(shè)置為-1 的時候不限制較大長度	Number	140
auto-focus	自動聚焦，拉起鍵盤。頁面中只能有一個 input 或 textarea標(biāo)簽時， 設(shè)置 auto-focus 屬性	Boolean	false
focus	獲取焦點(diǎn)（當(dāng)前開發(fā)工具暫不支持）	Boolean	false
bindinput	除了date/time類型外的輸入框，當(dāng)鍵盤輸入時，觸發(fā)input事件，處理函數(shù)可以直接 return 一個字符串，將替換輸入框的內(nèi)容。	EventHandle
bindfocus	輸入框聚焦時觸發(fā)event.detail = {value: value}	EventHandle
bindblur	輸入框失去焦點(diǎn)時觸發(fā)event.detail = {value: value}	EventHandle

屬性解析：

下面是WXML代碼：

[XML]

  等同于  




 等同于 


 等同于 


 等同于 


 等同于 

以上是“微信小程序中input輸入框組件有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：微信小程序中input輸入框組件有什么用-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://weahome.cn/article/ipghi.html