微信小程序监听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="{ ...
随机推荐
- Python 项目实践三(Web应用程序)第二篇
接着上节的继续学习,使用Django创建网页的过程通常分三个阶段:定义URL.编写视图和编写模板.首先,你必须定义URL模式,每个URL都被映射到特定的视图--视图函数获取并处理网页所需的数据.视图函 ...
- JMeter集合点
位置:添加--> 定时器-->Synchronizing Timer 注意:集合点放在所有操作之前. 假设线程组线程数设置的是50个,那么希望50个都准备好一块上,那么集合点中 ...
- GIT命令一页纸
,配置用户名和邮箱 $ git config --global user.name "Your Name" $ git config --global user.email &qu ...
- zabbix2.2部署安装(安装环境Centos 6.* X64)
1.在已有的LAMP或者LNMP的基础上安装zabbix,安装一些依赖包: 安装epel源:rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64 ...
- 如何用Fritzing实现元器件自定义接线图
在用Micropython开发板完成小实验时,很多朋友反应对照接线图实际接线有时会有一些困扰.今天给大家介绍一款画图软件Fritzing 看看是怎么自定义制作接线图的. 前提条件 1.准备好元器件 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- 【单调栈】最长不上升子序列变式,洛谷 P2757 导弹的召唤
题目背景 易琢然今天玩使命召唤,被敌军用空对地导弹轰炸,很不爽:众所周知,易琢然很不老实,他开了外挂: 外挂第一次可以打掉任意高度的导弹,之后每一次都不能打掉大于上一次高度的导弹: 但易琢然水平太差, ...
- 如何将VS 2015中的项目上传到github
最近开始慢慢接触github,现在希望将自己平时写的小程序,上传到github上,以便以后有个参考,在遇到同样问题的时候不至于想不起来怎么做而到处找别人的例子. VS 2015设置 首先下载跟gith ...
- Windows平台下的内存泄漏检测
在C/C++中内存泄漏是一个不可避免的问题,很多新手甚至有许多老手也会犯这样的错误,下面说明一下在windows平台下如何检测内存泄漏. 在windows平台下内存泄漏检测的原理大致如下. 1. 在分 ...
- Pandas系列之入门篇
Pandas系列之入门篇 简介 pandas 是 python用来数据清洗.分析的包,可以使用类sql的语法方便的进行数据关联.查询,属于内存计算范畴, 效率远远高于硬盘计算的数据库存储.另外pand ...