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 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
JavaScript提升机制Hoisting详解
Oct 23 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的错误信息
2006/10/09 PHP
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Python shutil模块用法实例分析
2019/10/02 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
计算机大学生的自我评价
2013/10/15 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
中学家长会邀请函
2014/02/03 职场文书
本科生就业推荐信
2014/05/19 职场文书
企业宣传工作方案
2014/06/02 职场文书
2014年采购员工作总结
2014/11/18 职场文书
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏