JS判断文本框内容改变事件的简单实例_javascript技巧

oninput,onpropertychange,onchange的用法

onchange触发事件必须满足两个条件:

a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)

b)当前对象失去焦点(onblur);

onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;      

oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

停止冒泡事件

if (e) //停止事件冒泡 e.stopPropagation();
else  window.event.cancelBubble = true;

执行上面的代码,单击输入框发现也会触发onpropertychange,输入一个值同样也会触发这个事件,这就证明了,只要有属性的值被修改就会触发该事件。

第二、既然我们发现了这个特点,那就会有一个问题了:当我们有时在输入框值发生改变时希望执行一个函数操作,但同时也要修改一个自定义的属性,这样onpropertychange就会被触发两次,这个可能并不是我们所希望的。
猜想一下,既然提供了这么一个属性,那一定应该能获取到是哪个属性被改变了。试着获取参数个数及参数内容。

XML/HTML代码

复制代码 代码如下:

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){  
alert(arguments.length);  
for(var i=0;i<arguments.length;i++){  
alert(arguments[i]);  
}  
});  
--> 
</script> 

执行上面一段代码,会发现弹出了1和[object],这说明该事件只给回调函数传入一个参数而且是object类型。
那我们就试试遍历一下这个object。

XML/HTML代码

复制代码 代码如下:

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
for(var item in o){  
alert(item+":"+o[item]);  
}  
});  
//--> 
</script> 

执行一下,发现有很多个属性,但仔细看我们可能会发现这么一个属性:propertyname,相信每个人都能猜到这个属性的意思了。对,这个就是用来获取哪个属性被修改的。

XML/HTML代码

复制代码 代码如下:

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
alert(o.propertyName);  
});  
//--> 
</script> 

分别单击文本框和输入一个值,会发现分别弹出了myprop和value。

再回到我们开始的问题,我们只需要判断是否是value被改变就ok了。
直接看代码吧:

XML/HTML代码

复制代码 代码如下:

<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!--  
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){  
if(o.propertyName!='value')return;  //不是value改变不执行下面的操作  
//.......函数处理  
});  
//--> 
</script>

时间: 2025-01-26 17:54:40

JS判断文本框内容改变事件的简单实例_javascript技巧的相关文章

JS判断文本框内容改变事件的简单实例

 本篇文章主要是对JS判断文本框内容改变事件的简单实例进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 oninput,onpropertychange,onchange的用法   onchange触发事件必须满足两个条件:   a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)   b)当前对象失去焦点(onblur):    onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的:          oninput是on

js 判断一组日期是否是连续的简单实例_javascript技巧

这是群里一朋友问的问题,当时我说判断下 day 是否相邻即可,后来细想,发现完全不对. 问题需求 给定5个相同格式的日期,怎么判断是否是连续5天呢? 我当时第一反应 getDay() 后排序,然后前后对比即可.. 但是细想,完全不对,比如本周一下周二,这样也会误判. 而且不仅仅这样的问题,还要跨月,跨年,闰月等问题. 然后就有了下面的代码. 让时间戳抹平一切吧 为了不纠结这些问题,我想到了时间戳,这货就可以完全忽略上述问题了,只要处理时间戳,最后比较即可. 然后我给了如下代码: let days

js判断某个字符出现的次数的简单实例_javascript技巧

js判断某个字符出现的次数的简单实例 function patch(re,s){ //参数1正则式,参数2字符串 re=eval_r("/"+re+"/ig"); //不区分大小写,如须则去掉i,改为 re=eval_r("/"+re+"/g") var len = s.match(re).length; return len; } var str="Hello World"; alert("nu

处理文本部分内容的TextRange对象应用实例_javascript技巧

因用户要求方与TextRange对象结缘,用于处理JavaScript对象文本部分内容的一个对象. TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了.不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化.删除.新增等.但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置.其中后者又有可以衍生出

JS判断浏览器是否安装flash插件的简单方法_javascript技巧

1. 直接判断是否有flash插件 var myFlash = (function(){ if(typeof window.ActiveXObject != "undefined"){ return new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); }else{ return navigator.plugins['Shockwave Flash']; } })();  chrome: Edge浏览器中取消了win

纯JS实现可拖拽表单的简单实例_javascript技巧

因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然

原生js实现jquery函数animate()动画效果的简单实例_javascript技巧

通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

js操作DOM--添加、删除节点的简单实例_javascript技巧

js removeChild() 用法 <body> <p id="p1">welcome to <b>javascript</b> world !</p> <script language="javascript" type="text/javascript"> <!-- function nodestatus(node) { var temp=""

js 弹出虚拟键盘修改密码的简单实例_javascript技巧

实例如下: //定义当前是否大写的状态 window.onload= function() { password1=null; initCalc(); } var CapsLockValue=0; var check; function setVariables() { tablewidth=630; // logo width, in pixels tableheight=20; // logo height, in pixels if (navigator.appName == "Netsc