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 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
JS打印组合功能
Aug 04 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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调用mysql存储过程实例分析
2014/12/29 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
vue实现图片上传功能
2020/05/28 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
python开发之str.format()用法实例分析
2016/02/22 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
python实现kmp算法的实例代码
2019/04/03 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
创业者是否需要商业计划书?
2014/02/07 职场文书
国庆促销活动总结
2014/08/29 职场文书
MySQL多表查询机制
2022/03/17 MySQL
Nginx速查手册及常见问题
2022/04/07 Servers