• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序:input输入框和form表单几种传值和取值方式

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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();
 }
 }
})

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序参数传递的几种方式发布时间:2022-07-18
下一篇:
微信小程序template模板与component组件的区别和使用 - 逍遥云天发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap