這篇文章主要講解了“微信小程序怎么實(shí)現(xiàn)input輸入框”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“微信小程序怎么實(shí)現(xiàn)input輸入框”吧!
成都創(chuàng)新互聯(lián)公司長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為三原企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),三原網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。實(shí)現(xiàn)效果圖:
微信小程序輸入框input
屬性名 | 類型 | 默認(rèn)值 | 說明 |
---|---|---|---|
value | String | 輸入框的內(nèi)容 | |
type | String | text | input的類型,有效值:text,number,idcard,digit,time,date |
password | Boolean | false | 是否是密碼類型 |
placeholder | String | 輸入框?yàn)榭諘r占位符 | |
placeholder-style | String | 指定placeholder的樣式 | |
placeholder-class | String | input-placeholder | 指定placeholder的樣式類 |
disabled | Boolean | false | 是否禁用 |
maxlength | Number | 140 | 較大輸入長度,設(shè)置為0的時候不限制較大長度 |
auto-focus | Boolean | false | 自動聚焦,拉起鍵盤。頁面中只能有一個input設(shè)置auto-focus屬性 |
focus | Boolean | false | 使得input獲取焦點(diǎn) |
bindchange | EventHandle | 輸入框失去焦點(diǎn)時,觸發(fā)bindchange事件,event.detail={value:value} | |
bindinput | EventHandle | 除了date/time類型外的輸入框,當(dāng)鍵盤輸入時,觸發(fā)input事件,event.detail={value:value},處理函數(shù)可以直接return一個字符串,將替換輸入框的內(nèi)容。 | |
bindfocus | EventHandle | 輸入框聚焦時觸發(fā),event.detail = {value:value} | |
bindblur | EventHandle | 輸入框失去焦點(diǎn)時觸發(fā),event.detail = {value:value} |
示例代碼:
<!--input.wxml--> <view class="section"> <input placeholder="這是一個可以自動聚焦的input" auto-focus/> </view> <view class="section"> <input placeholder="這個只有在按鈕點(diǎn)擊的時候才聚焦" focus="{{focus}}" /> <view class="btn-area"> <button bindtap="bindButtonTap">使得輸入框獲取焦點(diǎn)</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 bindinput="bindHideKeyboard" placeholder="輸入123自動收起鍵盤" /> </view> <view class="section"> <input type="emoji" placeholder="這是一個帶有表情的輸入框" /> </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ù)點(diǎn)的數(shù)字鍵盤"/> </view> <view class="section"> <input type="idcard" placeholder="身份證輸入鍵盤" /> </view> <view class="section"> <input placeholder- placeholder="占位符字體是紅色的" /> </view>
//input.js Page({ data:{ focus:false, inputValue:"" }, bindButtonTap:function(){ this.setData({ focus:Date.now() }) }, 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); //計(jì)算光標(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'), }, bindHideKeyboard:function(e){ if(e.detail.value === "123"){ //收起鍵盤 wx.hideKeyboard(); } } })
感謝各位的閱讀,以上就是“微信小程序怎么實(shí)現(xiàn)input輸入框”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對微信小程序怎么實(shí)現(xiàn)input輸入框這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
新聞名稱:微信小程序怎么實(shí)現(xiàn)input輸入框-創(chuàng)新互聯(lián)
標(biāo)題鏈接:http://www.muchs.cn/article30/ceocpo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作、面包屑導(dǎo)航、App開發(fā)、做網(wǎng)站、外貿(mào)建站、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容