原生js监听input值发生变化
原生JS中可以使用oninput,onpropertychange,onchange
oninput,onpropertychange,onchange的用法
1) onchange 触发事件必须满足两个条件:
a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
b)当前对象失去焦点(onblur);
2) onpropertychange ,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;
3) oninput 是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
亲自测试
Ie9以下通过 onpropertychange能监听到input值的改变
在Ie9,及其以上和谷歌浏览器测试时通过 oninput 来监测值的改变
JQuery
通过bind方法来监听input值发生改变
$("#inputs").bind('input propertychange',function(e){
console.log($(this).val())
})
用的bind,当遇到追加的新input标签时,则不能监听了,可以使用live替代
$('input').live('input propertychange', function()
{
//获取input 元素,并实时监听用户输入
//逻辑
})
原生js监听input值发生变化的更多相关文章
- 原生js监听input值改变事件
哈哈哈,又来了,今天闲来无事,实验了下原生js监听input value值改变事件,下面就来说道说道: 本来写监听input值便获是用jquery的,之前的随笔写了,就是这个方法,地址:http:// ...
- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...
- 原生Js监听普通dom尺寸变化
原生Js监听普通dom尺寸变化 具体做法有以下几种: 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大. 监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 ...
- js监听input输入框值的实时变化实例
情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...
- JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...
- 监听INPUT值的即时变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq 监听input值的变化
$(".popWeiXing .name").bind("input propertychange", function() { modValue.diyDat ...
随机推荐
- CSP-J2019游记&解题报告
考前一天晚上失眠.......(其实主要不是因为考试的原因) 很幸运,我们学校就是一个考点,本场作战,应该有一点加持吧. 上午在家复习,看到一篇关于PN532模拟小米手环加密卡的文章,于是,,,,,, ...
- vue-cli搭建SPA项目
1. 什么是vue-cli? vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下: vue init webpack xxx 2. 安装vue-cl ...
- 洛谷 P1351 联合权值 题解
P1351 联合权值 题目描述 无向连通图 \(G\) 有 \(n\) 个点,\(n-1\) 条边.点从 \(1\) 到 \(n\) 依次编号,编号为 \(i\) 的点的权值为 \(W_i\),每条 ...
- 「ZJOI2019」Minmax搜索
传送门 Solution 叶子节点的变化区间是连续的,可得知非叶子节点的权值变化区间也是连续的 由此可知,\(W\)的变化值的可行域也是连续的,所以只需要看它能否变为\(W+1\)或\(W-1\) 对 ...
- ICEM-圆角正方体
原视频下载地址:https://pan.baidu.com/s/1c2cNgJm 密码: rci8
- Linux设置开机挂载
Linux可不可以在开机的时候就将我们要的文件系统都挂载好?这样就不需要每次进入Linux系统还要挂载一次.当然可以,那就直接到/etc/fstab里面去修改. 系统挂载的一些限制: - 根目录/是必 ...
- 记录python循环引用带来的MemoryError错误解决
在以前的python中,没有遇到过这样的错误,上来之后还是很蒙蔽的,问了几个业内的人,他们 都给我说让我改服务器里面配置的东西, 因为是要给大家用的,服务器要保证长久运行,不能临时去修改这个,导致在大 ...
- 美团-2019Q2述职总结
述职要求: 产品对平台化的规划并不清晰:内部因素:对SaaS平台的理解不够深刻: 对公司相关脚手架,服务搭建相关需要注意的点,有更深入的认识.对做系统服务的关注点有了更深入的理解. 功能权限的话: Q ...
- 2019软工实践_Alpha(6/6)
队名:955 组长博客:https://www.cnblogs.com/cclong/p/11913269.html 作业博客:https://edu.cnblogs.com/campus/fzu/S ...
- deepnude | 福利
程序好下载github有,但是没有lib,就是没有训练好的model. 以下是搜到的win平台程序的下载链接: magnet:?xt=urn:btih:7BE4EB8D640742D2FFEBD649 ...