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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
vue自定义filters过滤器
Apr 26 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 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中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
PHP实现八皇后算法
2019/05/06 PHP
Add a Table to a Word Document
2007/06/15 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
python实现实时监控文件的方法
2016/08/26 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
python实现感知器
2017/12/19 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
关于期中考试的反思
2014/02/02 职场文书
三个儿子教学反思
2014/02/03 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
霸王洗发水广告词
2014/03/14 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
十八大观后感
2015/06/12 职场文书
小学班级标语口号大全
2015/12/26 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang