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 Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
jquery validation插件表单验证的一个例子
Mar 03 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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.MVC的模板标签系统(五)
2006/09/05 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php define的第二个参数使用方法
2013/11/04 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
python reverse反转部分数组的实例
2018/12/13 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
英国大码女性时装零售商:Evans
2018/08/29 全球购物
行政管理人员精品工作推荐信
2013/11/04 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
2014年化验室工作总结
2014/11/21 职场文书
给校长的建议书范文
2015/09/14 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技