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代码
Aug 13 Javascript
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
原生JS实现九宫格抽奖
Sep 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
node实现的爬虫功能示例
2018/05/04 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python实现合并两个有序链表的方法示例
2019/01/31 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
在keras里实现自定义上采样层
2020/06/28 Python
Python列表推导式实现代码实例
2020/09/09 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
小学一年级学生评语
2014/04/22 职场文书
教师自我剖析材料
2014/09/29 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
企业承诺书格式范文
2015/04/28 职场文书
董事长年会致辞
2015/07/29 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
python井字棋游戏实现人机对战
2022/04/28 Python