首頁 > 微信小程式 > 小程式開發 > 微信小程式input輸入框詳解實例碼

微信小程式input輸入框詳解實例碼

高洛峰
發布: 2017-03-21 16:57:20
原創
5061 人瀏覽過

這篇文章主要介紹了微信小程式input輸入框詳解及簡單實例的相關資料,需要的朋友可以參考下

實現效果圖:

微信小程式input輸入框詳解實例碼

微信小程式輸入框input

##最大輸入長度,設定為0的時候不限​​制最大長度auto-focus#Booleanfalse自動聚焦,拉起鍵盤。頁面中只能有一個input設定auto-focus屬性focusBooleanfalse使得input取得焦點bindchangeEventHandle 輸入方塊失去焦點時,觸發bindchange事件,event.detail={value:value} bindinputEventHandle 除了date/time類型外的輸入框,當鍵盤輸入時,觸發input事件,event.detail={value:value},處理bindfocusEventHandle 輸入方塊聚焦時觸發,event.detail = {value:value}bindblurEventHandle 輸入框失去焦點時觸發,event.detail = {value:value}
屬性名稱 類型 預設值 說明
value #String   輸入框的內容
type String text input的類型,有效值:text,number,idcard,digit ,time,date
password Boolean false 是否是密碼類型
placeholder String 輸入方塊為空時佔位符
placeholder-style String   #指定placeholder的樣式
placeholder-class String input-placeholder 指定placeholder的樣式類別
disabled Boolean false 是否停用
maxlength Number 140
函數可以直接return一個字串,將取代輸入框的內容。
#範例程式碼:

<!--input.wxml-->
<view>
 <input>
</view>
<view>
 <input>
 <view>
 <button>使得输入框获取焦点</button>
 </view>
</view>
<view>
 <input>
</view>
<view>
 <view>你输入的是:{{inputValue}}</view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</view>
<view>
 <input>
</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){
 //光标在中间
 var left = e.detail.value.slice(0,pos);
 //计算光标的位置
 pos = left.replace(/11/g,'2').length;
 }

 //直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置
 return {
 value:value.replace(/11/g,'2'),
 cursor:pos
 }

 //或者直接返回字符串,光标在最后边
 //return value.replace(/11/g,'2'),
 },
 bindHideKeyboard:function(e){
 if(e.detail.value === "123"){
 //收起键盘
 wx.hideKeyboard();
 }
 }
})
登入後複製
感謝閱讀,希望能幫助大家,謝謝大家對本站的支持!

以上是微信小程式input輸入框詳解實例碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板