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();
}
}
}) |
微信小程序:input输入框和form表单几种传值和取值方式的更多相关文章
-
微信小程序开发4之form表单与弹出层
第一 表单的提交和重置 第二 radio组件 第三 checkbox组件 第四 loading组件 第五 toast组件 第六 modal组件
-
微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
-
微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
-
微信小程序从零开始开发步骤(六)4种页面跳转的方法
用法:用于页面跳转,相当于html里面的<a></a>标签. API教程:https://mp.weixin.qq.com/debug/wxadoc/dev/component ...
-
laravel中form表单,ajax传值没反应
laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...
-
form表单在发送到服务器时候编码方式
enctype(编码方式):规定了form表单在发送到服务器时候编码方式.有如下的三个值可选: 1.application/x-www-form-urlencoded.默认的编码方式.但是在用文本的传 ...
-
在IOS设备上POST提交form表单,后台接收不到值怎么办?
原文:https://blog.csdn.net/xhaimail/article/details/90440029 最近在工作上遇到一个奇葩问题,在Android和Windows平台上做请求时参数都 ...
-
微信小程序 input 的 type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
-
微信自带浏览器不支持form表单post提交方案解决
微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...
随机推荐
-
java 中正则表达式匹配
String str = "#a#,#b#"; String reg="\\#+[^\\#]+\\#+"; Pattern p=Pattern.compile( ...
-
字符集GBK升级UTF8
在生产环境中,数据库字符集因为各种原因需要升级,比如为了支持汉字,从latin1字符集升级到GBK,后面为了支持多个语言文字,需要将GBK升级到UTF8等.迁移过程网上有很多,我今天主要想讲下字符集转 ...
-
【struts2】Result和ResultType
简单的说,Result是Action执行完后返回的一个字符串,它指示了Action执行完成后,下一个页面在哪里.Result仅仅是个字符串,仅仅是用来指示下一个页面的,那么如何才能够到达下一个页面呢? ...
-
Add 1G to a LVM on VMware
1. update disk1 to 5G from 4G in vcenter2. echo 1 > /sys/block/sda/device/rescan3. fdisk /dev/sda ...
-
疯狂Java讲义 第一章控制台五子棋(代码分析)
package com.test; public class Chessboard { //定义二维数组作为棋盘 private String[][] board; //定义棋盘大小 public s ...
-
PHP使用file_get_contents或curl请求https的域名内容为空或Http 505错误的问题排查方法
前段日子,突然接到用户的反馈,说系统中原来的QQ登录.微博登录通通都不能用,跟踪代码进去后发现,是在 file_get_contents这个函数请求QQ登录的地方报错,在用该函数file_get_co ...
-
sass command
compass create --bare --sass-dir "sass" --css-dir "css" --javascripts-dir " ...
-
Git 安装及使用小结
Git 安装及使用小结 a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline ...
-
redis 数据持久化 aof方式
redis持久化-Append-only file(缩写aof)的方式 本质:把用户执行的每个 ”写“ 指令(增加.修改.删除)都备份到文件中,还原数据的时候就是执行具体写指令. 打开redis的运 ...
-
说说asp.net中的异常处理和日志追踪
关于异常的处理想必大家都了解try{}catch(){}finally{},这里就不再讲了.通过在VS里的"调试"-"异常",在弹出的异常对话框里的Common ...