原生js监听input值改变事件
哈哈哈，又来了，今天闲来无事，实验了下原生js监听input value值改变事件，下面就来说道说道：
本来写监听input值便获是用jquery的，之前的随笔写了，就是这个方法，地址：http://www.cnblogs.com/wteng/p/5434403.html
$('input').bind('input propertychange', function() {
//to do
})
现在用原生js来实现一遍（其实我翻了下jquery的监听事件on的源码，没找到不知道他写哪了），本来是我要用冒泡去监听的整个form表单的input变化，然后 我这就这么写了,结果 经测试，chrome、firefox、ie9以上正常，皆大欢喜。But 还有个ie8 （国情不可避免呀），看官请往下看
<body>
<div id="form">
<p><input type="text" id="text1" /></p>
<p><input type="text" /></p>
<p><input type="text" /></p>
<p><input type="text" /></p>
<p><input type="text" /></p>
<p><input type="text" /></p>
<p><input type="text" /></p>
<p><input type="text" /></p>
</div>
<script type="text/javascript">
var form=document.getElementById("form");
addEventListener(form,"input",function(e){
console.log(e);
})
</script>
</body>
ie8 确实伤前端的心了，但是必须解决啊，看代码：
首先ie8 没有 addEventListener ，大家都知道 所以就封装了个函数处理下。然后之前的input事件在ie下没用，所以 换成了 propertychange ，这个propertychange 事件我再ie9以上，以及其他的浏览器也试了下，呵呵都没用。
然后就加了判断如果是ie8，就用propertychange，然还是没反应，测试发现想用冒泡惹的祸。试下只绑定input，啊可以了~
//var form=document.getElementById("form"); //ie8下这个玩意想冒泡还不行（也可能是我ie有问题，反正他不太正常）
var form=document.getElementById("text1");
var hl="input";
if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i)=="8.")
{ //IE 8.0
hl="propertychange";
}
addEvent(form,hl,function(e){
console.log(e);
})
function addEvent(el,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
el.addEventListener(type,handle,false);
}catch(e){try{ // IE8.0及其以下版本
el.attachEvent('on' + type,handle);
}catch(e){ // 早期浏览器
el['on' + type] = handle;
}
}
}
就这么多，如果想在ie8下也用冒泡只绑一次，那就靠你自己了写代码了
【转载请注明出处】
原生js监听input值改变事件的更多相关文章
- 原生js监听input值发生变化
原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足 ...
- JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...
- 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监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // // 要达到的效果 ...
- 复选框 省市区 联动（监听input的change事件）
需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省 选择对应的第一个市区,同时默认选中第 ...
- 原生Js监听普通dom尺寸变化
原生Js监听普通dom尺寸变化 具体做法有以下几种: 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大. 监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 ...
- iOS：使用代理模式监听开关状态改变事件
记一次解决跨控制器监听开关状态改变的尝试. 为了统一设置UITableViewCell里的内容,自定义了UITableViewCell类的一个基类,命名为SettingCell.SettingCell ...
- JS监听input框的回车事件、属性值改变事件
一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...
随机推荐
- Map 和 javaBean转换
package com.siang.util; import java.beans.BeanInfo; import java.beans.Introspector; import java.bean ...
- Java多线程之~~~~synchronized 方法
在多线程开发中,总会遇到多个在不同线程中的方法操作同一个数据,这样在不同线程中操作这个数据不同的顺序 或者时机会导致各种不同的现象发生,以至于不能实现你预期的效果,不能实现一致性,这时候就能够使用 s ...
- html5-补充知识
原理 html5+开发app的原理大概是这样: html页面负责内容: ui负责页面样式: js负责调用原生app方法. html5 html5这部分负责页面,也就是app中你看到的东西,大概的架构和 ...
- Educational Codeforces Round 1 (C) （atan2 + long double | 大数）
这题只能呵呵了. 东搞西搞,折腾快一天,最后用了一个800多行的代码AC了. 好好的题目你卡这种精度干啥. 还有要卡您就多卡点行不,为什么long double 又可以过... 废了N长时间写个了不管 ...
- 【BZOJ4927】第一题 双指针+DP（容斥？）
[BZOJ4927]第一题 Description 给定n根直的木棍,要从中选出6根木棍,满足:能用这6根木棍拼 出一个正方形.注意木棍不能弯折.问方案数. 正方形:四条边都相等.四个角都是直角的四边 ...
- zabbix server is not running解决办法
正常安装完zabbix后,登录后zabbix监控报错zabbix server is not running: the information displayed may not be current ...
- POJ 1518 A Round Peg in a Ground Hole【计算几何=_=你值得一虐】
链接: http://poj.org/problem?id=1584 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=22013#probl ...
- iOS使用正则匹配限制输入密码格式
1.代码实现"密码至少为9位,并需包含大写字母.小写字母.数字或特殊字符等三种" 返回0.1.2为格式不正确,返回4为密码格式正确 -(int)checkIsHaveNumAndL ...
- LengthFieldBasedFrameDecoder 秒懂
目录 写在前面 1.1.1. 解码器:FrameDecoder 1.1.1. 难点:自定义长度帧解码器 写在最后 疯狂创客圈 亿级流量 高并发IM 学习实战 疯狂创客圈 Java 分布式聊天室[ 亿级 ...
- Pipeline outbound
netty源码死磕8 Pipeline outbound 出站流程揭秘 1. Pipeline outbound流程 1.1. 出站的定义 简单回顾一下. 出站(outbound) 操作,通常是处于上 ...