小編給大家分享一下微信小程序中input輸入框組件有什么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)公司擁有10余年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù),對于網(wǎng)頁設(shè)計(jì)、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è)計(jì)、網(wǎng)絡(luò)營銷經(jīng)驗(yàn),集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等網(wǎng)站化運(yùn)作于一體,具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。input輸入框組件說明:
input輸入框示例代碼運(yùn)行效果如下:
下面是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)獲取焦點(diǎn) <input bindfocus="bindfocus"/> bindblur:當(dāng)失去焦點(diǎn)觸發(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失去焦點(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(shí)占位符 | String | |
placeholder-style | 指定 placeholder 的樣式 | String | |
placeholder-class | 指定 placeholder 的樣式類 | String | input-placeholder |
disabled | 是否禁用 | Boolean | false |
maxlength | 較大輸入長度, 設(shè)置為-1 的時(shí)候不限制較大長度 | Number | 140 |
auto-focus | 自動(dòng)聚焦,拉起鍵盤。頁面中只能有一個(gè) input 或 textarea標(biāo)簽時(shí), 設(shè)置 auto-focus 屬性 | Boolean | false |
focus | 獲取焦點(diǎn)(當(dāng)前開發(fā)工具暫不支持) | Boolean | false |
bindinput | 除了date/time類型外的輸入框,當(dāng)鍵盤輸入時(shí),觸發(fā)input事件,處理函數(shù)可以直接 return 一個(gè)字符串,將替換輸入框的內(nèi)容。 | EventHandle | |
bindfocus | 輸入框聚焦時(shí)觸發(fā)event.detail = {value: value} | EventHandle | |
bindblur | 輸入框失去焦點(diǎn)時(shí)觸發(fā)event.detail = {value: value} | EventHandle |
屬性解析:
下面是WXML代碼:
[XML]
<!--屬性:--> <!--value:輸入框內(nèi)容--> <input value="內(nèi)容"/> <!--type:有效類型text,number,idcard,digit,小編感覺其他三個(gè)和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="占位符動(dòng)態(tài)樣式,可用{{}}進(jìn)行動(dòng)態(tài)賦值"/> <!--disabled:控制標(biāo)簽有效,或者失效狀態(tài),在失效狀態(tài),不能獲取該值--> <input disabled="{{true}}"/> <input disabled/> 等同于 <input disabled="{{false}}"/> <!--maxlength:內(nèi)容長度限制,默認(rèn)140--> <input maxlength="100"/> <input maxlength/> 等同于 <input maxlength="140"/> <!--focus:初始化時(shí),獲取輸入焦點(diǎn)(目前開發(fā)工具暫不支持)--> <input focus="{{true}}"/> <input focus/> 等同于 <input focus="{{false}}"/> <!--auto-focus:當(dāng)界面只有一個(gè)input,自動(dòng)獲取焦點(diǎn)--> <input auto-focus="{{true}}"/> <input auto-focus/> 等同于 <input auto-focus="{{false}}"/> <!--事件:--> <!--bindinput:當(dāng)內(nèi)容改動(dòng)時(shí)觸發(fā)--> <input bindinput="自己定義函數(shù)名"> <!--bindfocus:當(dāng)獲取焦點(diǎn),可用輸入狀態(tài)時(shí)觸發(fā)--> <input bindfocus="自己定義函數(shù)名"> <!--bindblur:當(dāng)失去焦點(diǎn)觸發(fā)--> <input bindblur="自己定義函數(shù)名">
以上是“微信小程序中input輸入框組件有什么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞標(biāo)題:微信小程序中input輸入框組件有什么用-創(chuàng)新互聯(lián)
文章出自:http://www.muchs.cn/article45/ipghi.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)、App開發(fā)、網(wǎng)站排名、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容