js监听输入框值的即时变化onpropertychange、oninput


Posted in Javascript onJuly 13, 2011

要达到的效果
很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等。
只要我们能捕获即时事件就能做到很多事情。
需要了解的知识
首先,我们需要了解onchange和onpropertychange的不同:
IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。
onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。
了解这一点后我们发现onpropertychange的效果就是我们想要的,可是很遗憾,它只在IE下有效果。我们能不能找到另外一个时间来代替onpropertychange呢?
经过翻阅资料得知,在其他浏览器下可以使用oninput事件来达到同样的效果,真是太好了,我们只需要把IE浏览器区分出来就可以。
oninput的使用
下面我们先了解一下oninput如何使用。

如果您是将注册时间直接写在页面里面,那么如下写法就可以实现:
<input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />
但是,将oninput写在JS代码中分离出来时与普通事件注册的方法有些不同,必须使用addEventListener来注册。
attachEvent和addEventListener 的不同
说到这里我们再来了解一下 attachEvent和addEventListener 的使用方法:
attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
举例:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果这样写,那么将会只有medhot3被执行
写成这样:
var btn1Obj = document.getElementById("btn1");
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1
如果是Mozilla系列,并不支持该方法,需要用到addEventListener
var btn1Obj = document.getElementById("btn1");
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3
了解了如何使用addEventListener来注册oninput事件后我们再回到要解决的问题[划分浏览器]。
判断IE浏览器
如何将IE区分出来呢?
这似乎是一个老生常谈的问题,网络中有很多找那个方法,归类为两类:
其一,是判断浏览器的功能属性。
其二,就是判断传统的 user-agent 字符串,这可能是最古老也是最流行的检测方式。
在这里就不做深入了解了,我们这里用一种比较简单的方法来判断

if("\v"=="v") { 
alert("IE"); 
}else{ 
alert("NO"); 
}

到目前为止我们遇到的问题就已经解决了,开始写代码来测试我们的思路是否能够实现。
完成代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="auther" content="fq" /> 
<title>监听输入框值的即时变化 onpropertychange oninput</title> 
<script type="text/javascript"> 
function immediately(){ 
var element = document.getElementById("mytext"); 
if("\v"=="v") { 
element.onpropertychange = webChange; 
}else{ 
element.addEventListener("input",webChange,false); 
} 
function webChange(){ 
if(element.value){document.getElementById("test").innerHTML = element.value}; 
} 
} 
</script> 
</head> 
<body>

直接写在页面中的示例:
<input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" /> 
<div>您输入的值为:<span id="webtest">还未输入</span></div> 
<br /><br /><br /><br /><br /> 
写在JS中的示例: 
<input type="text" name="textfield" id="mytext" /> 
<div>您输入的值为:<span id="test">还未输入</span></div> 
<script type="text/javascript"> 
immediately(); 
</script> 
</body> 
</html>

太漂亮了,一次完成,预览以上代码,页面中共实现两两种方式:第一、页面中直接引用;第二、JS中引用。
经过测试,兼容:IE6、IE7、IE8、Firefox、Opera、Chrome、Safari
Javascript 相关文章推荐
jquery 操作DOM的基本用法分享
Apr 05 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
基于ssm框架实现layui分页效果
Jul 27 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
如何利用js在两个html窗口间通信
Apr 27 Javascript
js 判断脚本加载完毕的代码
Jul 13 #Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 #Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 #Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 #Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 #Javascript
一些实用的jQuery代码片段收集
Jul 12 #Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 #Javascript
You might like
php显示时间常用方法小结
2015/06/05 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
一组SQL面试题
2016/02/15 面试题
幼教个人求职信范文
2013/12/02 职场文书
商场消防演习方案
2014/02/12 职场文书
终止合同协议书
2014/04/17 职场文书
教师年度考核评语
2014/04/28 职场文书
企业2014年度工作总结
2014/12/10 职场文书
工作年限证明模板
2015/06/15 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
Python list去重且保持原顺序不变的方法
2021/04/03 Python
opencv 分类白天与夜景视频的方法
2021/06/05 Python
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL