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实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
vue.js 2.0实现简单分页效果
Jul 29 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
Python内置函数之filter map reduce介绍
2014/11/30 Python
浅谈Python中的闭包
2015/07/08 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
工商企业管理实习自我鉴定
2013/12/04 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
志愿者活动总结范文
2014/04/26 职场文书
入党介绍人评语
2014/05/06 职场文书
离职证明范本
2015/06/12 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server