微信小程序监听input输入并取值
小程序的事件分为两种,冒泡和非冒泡事件,像<form/>
的submit
事件,<input/>
的input
事件,<scroll-view/>
的scroll
事件等非冒泡事件,需要到组件的文档里去找,如下是我截图的一些常用的非冒泡事件
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
想要实时监听input的输入只要使用bindinput就可以了,
wxml:
<input bindinput='watchPassWord' type='password' class="weui-input" placeholder="请输入密码" />
js:
Page({
// 监听输入
watchPassWord: function (event) {
console.log(event.detail.value);
}
})
event是当前的事件对象,包含当前的各种信息,detail就是我们需要的信息了,按自己的需求处理就好,console展开如下:
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
微信小程序监听input输入并取值的更多相关文章
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
- 实时监听input输入内容的N种方法
现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...
- 微信小程序获取输入框(input)内容
微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...
- 微信小程序自动去除input空格的方法
当用户输入账号或者密码的时候,可能会有输入空格的情况,但是实际需要是不能够有空格的,所以我们要做一个去除空格,并且适应所有input的name参数的方法,下面请看源码: wxml: <input ...
- jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化
jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oni ...
- 微信小程序怎么获取用户输入
能够获取用户输入的组件,需要使用组件的属性bindchange将用户的输入内容同步到 AppService. <input id="myInput" bindchange=& ...
- 微信小程序tips集合:无法输入文字/随时查看页面/元素审查/点击事件/数据绑定
1:编辑文档无法输入文字 出现这种情况一般是因为之前编辑的文档未保存,所有在其他文档输入的时候会自动输入到未保存的文档中,在文档暂时编辑完毕后要ctrl+s随手保存,不然会出现无法打字情况 2: 随时 ...
- 实时监听input输入的变化(兼容主流浏览器)【转】
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- 微信小程序----搜索框input回车搜索事件
在微信小程序里的搜索框,按软键盘回车键触发搜索事件. <input type="text" placeholder="搜索" value="{ ...
随机推荐
- bzoj 2727: [HNOI2012]双十字
Description 在C 部落,双十字是非常重要的一个部落标志.所谓双十字,如下面两个例子,由两条水平的和一条竖直的"1"线段组成,要求满足以下几个限制: 我们可以找到 5 个 ...
- 系统内置委托:Func/Action
lSystem.Func 代表有返回类型的委托 lpublic delegate TResult Func<out TResult>(); lpublic delegate TResul ...
- input上传图片(file),预览图片的两种方法。blob与base64编码
上传图片时一般都需要预览,我一般用这两种方法来实现.base64编码可以直接上传到后台,后台解析下,得到的文件就会比较小了,省去了压缩图片这一步了. //获取对象input file 的图片地址,放进 ...
- Webpack 2 视频教程 018 - 使用可视化图表进行统计分析打包过程
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- Python第二十天 shutil 模块 zipfile tarfile 模块
Python第二十天 shutil 模块 zipfile tarfile 模块 os文件的操作还应该包含移动 复制 打包 压缩 解压等操作,这些os模块都没有提供 shutil 模块shut ...
- 设置状态栏(UIStatusBar)样式
方法1:找到项目里面的info.plist文件,添加属性Status bar style,设置属性值为transparent black style 状态条为白色 ,设置属性值为 gray style ...
- Odwiedziny[POI 2015]
题目描述 给定一棵n个点的树,树上每条边的长度都为1,第i个点的权值为a[i]. Byteasar想要走遍这整棵树,他会按照某个1到n的全排列b走n-1次,第i次他会从b[i]点走到b[i+1]点,并 ...
- windows10合并分区
删除无用分区 将分区D合并到分区C,"计算机"---右键"管理"--"磁盘管理" 点击分区名,右键选择删除卷,如果有数据,提前备份 扩展分区 ...
- scrapy使用PhantomJS爬取数据
环境:python2.7+scrapy+selenium+PhantomJS 内容:测试scrapy+PhantomJS 爬去内容:涉及到js加载更多的页面 原理:配置文件打开中间件+修改proces ...
- 小程序wxss和css3的区别
经过设置发现,微信小程序中wxss并不能完全支持css3的全部功能. 总结记录在此文中,以免忘记. 0 . wxss不能直接通过css3中的background-image属性来设置显示的背景图片. ...