微信小程序: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输入框和form表单几种传值和取值方式_第1张图片

 

微信小程序输入框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
"section" >
  "这是一个可以自动聚焦的input" auto-focus/>
"section" >
  "这个只有在按钮点击的时候才聚焦" focus= "{{focus}}" />
  "btn-area" >
 
 
"section" >
  "10" placeholder= "最大输入长度10" />
"section" >
  "section__title" >你输入的是:{{inputValue}}
  "bindKeyInput" placeholder= "输入同步到view中" />
"section" >
  "bindReplaceInput" placeholder= "连续的两个1会变成2" />
"section" >
  "bindHideKeyboard" placeholder= "输入123自动收起键盘" />
"section" >
  "emoji" placeholder= "这是一个带有表情的输入框" />
"section" >
  "number" />
"section" >
  "text" />
"section" >
  "digit" placeholder= "带小数点的数字键盘" />
"section" >
  "idcard" placeholder= "身份证输入键盘" />
"section" >
  "color:red" placeholder= "占位符字体是红色的" />
?
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();
  }
  }
})

你可能感兴趣的:(微信小程序:input输入框和form表单几种传值和取值方式)