专栏首页搞前端的李蚊子微信小程序监听input输入并取值

微信小程序监听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展开如下:

冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序使用字体图标的方法

    一、先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 image.png 从项目里下载下来并解压...

    李文杨
  • 武装你的小程序——开发流程指南

    全文全部基于原生的小程序开发所阐述,各种第三方框架开发不在此列。并不会将整个项目的搭建流程细致的写出来,而是挑其中我认为在开发过程中存在的一些很重要的点进行详细...

    李文杨
  • 武装你的小程序——开发流程指南

    全文全部基于原生的小程序开发所阐述,各种第三方框架开发不在此列。并不会将整个项目的搭建流程细致的写出来,而是挑其中我认为在开发过程中存在的一些很重要的点进行详细...

    李文杨
  • react是如何实现冒泡的

    react 自己实现了一套事件冒泡机制,将所有事件都用代理的方式绑定到 document上。这里谈下我对 react 的冒泡实现的理解,不对的请指出。

    IMWeb前端团队
  • 你真的了解艾滋病吗?这个妹子做了款小程序,专门防制 AIDS | 晓组织 #6

    我是奶瓶湄紫,「艾查查」小程序的主体开发者,公共卫生执业医师,就职于上海市普陀区疾控中心,常年游走在互联网边缘。

    知晓君
  • 两年融资22.4亿,获腾讯入股的谊品生鲜有哪些“绝技”?

    2015年11月入驻成都,并于2017年起加速扩张,同年7月入驻武汉,2018年进驻南京、北京、贵阳、 杭州、南昌,2019年已进入上海和福州。

    庄帅
  • HttpComponents HttpClient连接池(4)-连接的重用和KeepAlive

    在上一篇文章里我们介绍了 httpclient 连接池中对于连接的申请和释放,这里我们主要介绍连接的重用,以及 keep alive。

    TA码字
  • 腾讯云云开发入门

    腾讯云开发目前仅支持通过云开发控制台来登录和管理您的云服务。云开发提供基础能力的 SDK,通过云开发的 SDK,即可在您的移动应用中使用云开发所提供的数据库、存...

    勤劳的小蜜蜂
  • 远程唤醒启动内网电脑

    偶尔需要远程登录公司电脑处理一些事情,但老是开着机太费电,刚好手上有个服务器,还有个MTK7628方案的一个小路由,又刚好维护着个人订阅号一枚,然后又刚刚好看到...

    huginn 中文网
  • 栈和队列就是这么简单

    一、前言 上一篇已经讲过了链表【Java实现单向链表】了,它跟数组都是线性结构的基础,本文主要讲解线性结构的应用:栈和队列 如果写错的地方希望大家能够多多体谅并...

    Java3y

扫码关注云+社区

领取腾讯云代金券