微信小程序:input輸入框和form表單幾種傳值和取值方式


1、傳值:index下標傳值、頁面navigator傳值

1、index下標
實現方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index來填坑即可

2、<navigator>標簽
<navigator url="../enlist/enlist?unitPrice={{common.act_fee}}&is_home=0&a_id={{common.a_id}}">
或者
<view class="container" data-index="{{index}}" bindtap="edit"><image src="../../../images/icon_edit.png" /><text>編輯</text></view> 
edit: function (e) {
  var that = this;
  // 取得下標
  wx.navigateTo({
    url: '../add/add?objectId='+objectId
  });
},

 

2、取值:form表單取值、input框綁定取值

1、 form表單取值
1.1 方式一,通過<form bindsubmit="formSubmit"><button formType="submit">標簽配合使用
formSubmit: function(e) {
  // detail
  var detail = e.detail.value.detail;
  // realname
  var realname = e.detail.value.realname;
  // mobile
  var mobile = e.detail.value.mobile;
}

2、方式二,通過<input bindblur="realnameConfirm">實現:失去焦點bindblur、數值變化bindchange等方法
realnameConfirm: function(e) {
  var that = this;
   that.setData({
      realname:e.detail.value 
   })
}

//然后可以在頁面其他地方用到了,改校驗的校驗,改發送給后台的發送,等等

 

微信小程序輸入框input

屬性名 類型 默認值 說明
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 最大輸入長度,設置為0的時候不限制最大長度
auto-focus Boolean false 自動聚焦,拉起鍵盤。頁面中只能有一個input設置auto-focus屬性
focus Boolean false 使得input獲取焦點
bindchange EventHandle   輸入框失去焦點時,觸發bindchange事件,event.detail={value:value}
bindinput EventHandle   除了date/time類型外的輸入框,當鍵盤輸入時,觸發input事件,event.detail={value:value},處理函數可以直接return一個字符串,將替換輸入框的內容。
bindfocus EventHandle   輸入框聚焦時觸發,event.detail = {value:value}
bindblur EventHandle   輸入框失去焦點時觸發,event.detail = {value:value}

 

示例代碼:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!--input.wxml-->
<view class= "section" >
  <input placeholder= "這是一個可以自動聚焦的input" auto-focus/>
</view>
<view class= "section" >
  <input placeholder= "這個只有在按鈕點擊的時候才聚焦" focus= "{{focus}}" />
  <view class= "btn-area" >
  <button bindtap= "bindButtonTap" >使得輸入框獲取焦點</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= "連續的兩個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= "帶小數點的數字鍵盤" />
</view>
<view class= "section" >
  <input type= "idcard" placeholder= "身份證輸入鍵盤" />
</view>
<view class= "section" >
  <input placeholder-style= "color:red" placeholder= "占位符字體是紅色的" />
</view>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//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();
  }
  }
})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM