微信小程序监听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="{ ...
随机推荐
- Selinux安全机制
1.Selinux安全机制简介 Selinux是Google在Android 4.4上正式推出的一套以SELinux为基础于核心的系统安全机制.而SELinux则是由美国NSA(国安局)和一些公司(R ...
- Handwritten Parsers & Lexers in Go (Gopher Academy Blog)
Handwritten Parsers & Lexers in Go (原文地址 https://blog.gopheracademy.com/advent-2014/parsers-lex ...
- 初学ssm框架的信息
ssm框架,就是Spring ,SpringMVC ,mybstis 的简称,我们是从mybstis 开始学起的,mybatis的作用作为一个连接数据库的框架,可以很好配置连接好数据库, 有mybat ...
- 用Python玩转微信(一)
欢迎大家访问我的个人网站<刘江的博客和教程>:www.liujiangblog.com 主要分享Python 及Django教程以及相关的博客 交流QQ群:453131687 今天偶然看见 ...
- Fiddler 抓包https配置 提示creation of the root certificate was not successful 证书安装不成功
在使用Fiddler抓包时,我们有时需要抓https协议的包,这种需要配置一下 开启监控https才可以 首先 找到Tools——>Options 在弹出的菜单中 选择https项 勾选捕捉h ...
- MySQL数据库学习: 02 —— 数据库的安装与配置
MySQL安装图解 一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.0.27-win32.zip,双击解压缩,运行“setup. ...
- Asp.net 不安全端口 解决chrome浏览器访问时提示:ERR_UNSAFE_PORT
https://blog.bbzhh.com/index.php/archives/136.html 想在vps做个测试,看看是否25端口屏蔽是否生效,于是起了一个小web服务在25端口做测试,但是使 ...
- Nginx: http 跳转 https
参考:博文 参考:HTTP 状态码解读 Nginx - rewrite 方式 Nginx Server 配置 server { listen ; server_name www.test.com te ...
- Android JNI so库的开发
build.gradle的配置 apply plugin: 'com.android.application'android { compileSdkVersion 26 buildToolsVers ...
- vue实现星级评价效果
希望对你们有用,已经自己试过可以的才发布出来的 效果如下: html: <template> <div class="evaStar"> <ul cl ...