微信小程序监听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="{ ...
随机推荐
- ArcGIS API for JavaScript 4.2学习笔记[9] 同一种视图不同数据(Map)同步
本例子核心:对MapView对象的map属性值进行替换即可达到更改地图数据的效果. 这个例子用的不是Map对象了,而是用的发布在服务器上的专题地图(WebMap)来加载到MapView上进行显示. 在 ...
- ArcGIS API for JavaScript 4.2学习笔记[14] 弹窗的位置、为弹窗添加元素
这一节我们来看看弹窗的位置和弹窗上能放什么. 先一句话总结: 位置:可以随便(点击时出现或者一直固定在某个位置),也可以指定位置 能放什么:四种,文字.媒体(图片等).表格.附件. [Part I 位 ...
- ubuntu下加载mcypt
mcrypt 是php 里面重要的加密支持扩展库,linux环境下:该库在默认情况下不开启.window环境下:PHP>=5.3,默认开启mcrypt扩展 1.命令行下载(不嫌麻烦可以到网上找安 ...
- date 命令详解
date - print or set the system date and time Display the current time in the given FORMAT, or set th ...
- My Go Resolutions for 2017(from Russ cox's blog)
我的2017年Go决议 一年之季始于春,我认为写一些今年我希望在Go上做的东西是有意义的. 我每年的目标是帮助Go开发人员.我想确保我们在Go团队中所做的工作对Go开发者有重大的积极影响.可能听起来很 ...
- vue过滤数字为2位小数点,过滤器
过滤数字为2位小数点 filters: { //保留2位小数点过滤器 不四舍五入 number(value) { var toFixedNum = Number(value).toFixed(3); ...
- Java实现矩阵计算器【代码】
其实这个程序最开始是大二下学期Java的一次平时作业,当时只要求产生几个随机矩阵并对这些矩阵进行计算. 所以当时没去实现现在这么丰富而且实用的功能.不过当时倒是挺想去做的,无奈有些不知道怎么去实现. ...
- flex弹性布局语法介绍及使用
一.语法介绍 Flex布局(弹性布局) ,一种新的布局解决方案 可简单.快速的实现网页布局 目前市面浏览器已全部支持1.指定容器为flex布局 display: flex; Webkit内核的浏览器, ...
- 警惕phpstudy等开发神器使用默认配置可能带来的危险
0x00 前言 其实这个点早在之前,我就已经想到了,当时也觉得没啥就记在了我的印象笔记里. 而今天重新把这个点拿出来讲,主要是因为今天早上在温习nmap的时候,一不小心利用这个点,拿下了一位同事的电脑 ...
- Factom(公证通)--基于区块链的存证系统
Factom这个Solution在2014年的时候就已经推出了,现在已经2018年了,我才来写这一篇分析文章可能有些迟了,但是它是十分具有参考价值的.因为现阶段来开区块链虽然炒得火热--养猫.养狗.草 ...