JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS:
document.getElementById("input对象的ID").addEventListener('input',function(){
console.log("aaaaa");
});
JQ:
$("input对象").on("input propertychange",function(){
console.log($(this).val());
});
这个也适用与textarea标签的内容的及时监听,只需要把对象名改变就行了,其它不用变。
MUI 清除按钮的点击的监听:
mui('input对象')[0].addEventListener('focus', function(){
mui(".mui-icon-clear")[0].addEventListener('tap',function(){
console.log("aaaaa");
});
})
说明:因为MUI搜索框里自带的清除按钮是当input框focus,即input获取焦点的时候才出现的,如果不要input的focus监听事件,那么清除按钮的点击事件是不会监听到的。
我觉得是因为清除按钮
,下面的那个span是文档加载完之后,MUI的js加载进去的,所以当不先监听input的focus事件的时候,清除按钮的监听事件是找不到那个DOM对象的,所以就会报
这样的错误。
JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件的更多相关文章
- oninput和onpropertychange实时监听输入框值的变化
oninput和onpropertychange实时监听输入框值的变化 传统监听输入框的做法就是使用keyup.keydown.keypress,或者change事件来实现,但keyup.keydow ...
- flex 在父窗口监听弹出窗口里的某个按钮被点击
flex 在父窗口监听弹出窗口里的某个按钮被点击 这样可以从子窗口拿回数据在父窗口处理数据,不必再子窗口中处理.在某些情形下省去了不少麻烦. /** * 右键菜单项单击事件 * changed by ...
- javascript --- 实时监听输入框值的变化
实时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输 ...
- 移动端(html5)微信公众号下用keyup实时监控input值的变化无效
搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公 ...
- jq 监听input值的变化
$(".popWeiXing .name").bind("input propertychange", function() { modValue.diyDat ...
- 实时监听 input值的变化
重点:$('#xx').bind('input propertychange', function() {} 举例子: html: <div ><span id="numb ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化
jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框值的即时变化 网上有很多关于 onpropertychange.oni ...
- Js/jQuery实时监听输入框值变化
前言 在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能 ...
随机推荐
- C. A Mist of Florescence
链接 [http://codeforces.com/contest/989/problem/C] 题意 给定A B C D四个字符个数,让你构造一个矩阵使得他们的个数恰好那么多,联通块算一块 分析 构 ...
- oracle数据库添加新用户
/*分为四步 */ /*第1步:创建临时表空间 */ create temporary tablespace kmyf_temp tempfile 'E:\app\pangxy\product\11. ...
- linux及安全第四周总结
学习内容:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 一.用户态.内核态 权限分级——为了系统本身更稳定,使系统不宜崩溃.(并不是所有程序员缩写的代码都很健壮!!) x86 CP ...
- git学习心得
https://github.com/zhangxinn/test/tree/master 自己虽然在课堂上有认真的听老师讲解如何使用github,包括怎样在线学习,怎样在github上建立自己的仓库 ...
- 第三个Sprint ------第五天
显示计算对错代码 package com.app.senior_calculator; import java.math.BigDecimal; import java.util.EmptyStack ...
- 作业6-COSPLAY孩子他家长
为了我提高我女儿的数学能力,我以下我会根据我想要的功能做出相应的解决方案,为了孩子,父母也可以想的比老师周到.可怜天下父母心. 编号. 名称. ...
- git学习笔记2——ProGit2
先附上教程--<ProGit 2> 配置信息 Git 自带一个 git config 的工具来帮助设置控制 Git 外观和行为的配置变量. 这些变量存储在三个不同的位置: /etc/git ...
- WIN10 Samba(SMB) v1 trouble shooting
现象:WIN10 Education Editon不能访问SMB V1.5的NAS服务器的共享文件夹. 一篇WIN与SMB相关的经验帖:https://jingyan.baidu.com/articl ...
- 传输层中的协议 TCP & UDP
面向连接的TCP协议 “面向连接”就是在正式通信前必须要与对方建立起连接.比如你给别人打电话,必须等线路接通了.对方拿起话筒才能相互通话.TCP(Transmission Control Protoc ...
- python Thread、lock
Python的标准库提供了两个模块:_thread和threading,_thread是低级模块,threading是高级模块,对_thread进行了封装.绝大多数情况下,我们只需要使用threadi ...