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

 本篇文章主要是对JS判断文本框内容改变事件的简单实例进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助

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>

时间: 2024-11-02 08:24:10

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

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

oninput,onpropertychange,onchange的用法 onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur): onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的:       oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都

捕获input文本框内容改变事件的js代码_表单特效

网上一位老兄采用如此方法: readonly :是文本框不可输入. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 可以采用onPropertyChange来捕获文本改变事件,试验成功!

js判断文本框输入的内容是否为数字_javascript技巧

如何验证文本框中的内容是否为数字,本文提供了三种方法,希望对大家的学习有所启发. 在某些情况下可能需要让文本框中的内容只能够输入数字,例如手机号码或者邮编之类的,下面简单介绍一下如何实现此功能. 下面是验证数字的正则表达式: "^\\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\\d+)|(0+))$" //非正整数(负整数 + 0) "^-[0-9]*[1-9][0-9]

JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法_javascript技巧

多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/&quo

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

JS判断是否在微信浏览器打开的简单实例(推荐)_javascript技巧

最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去.在分享页面上提供公司APP的下载.但是在很多应用的浏览器中,点击下载链接无法下载应用.那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面.通过js就可以判断当前页面是在什么浏览器打开的. 以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开.当然可以做得更完善一点,再加上判断是在移动设备打开还是在PC端浏览器打开的,更加细分一点,可以判断是

ajax(js)判断文本框输入的用户是否存在

问题描述 我想实现一个有关利用ajax(js)判断用户名是否被占用的功能,不知道谁能够帮忙解决一下<inputid="tbUsername"type="text"runat="server"class="username"style="width:180px;"onfocus="setStyle1('LbUserName')"onblur="setStyle2('LbUs

js判断文本框的输入值是否有值

这是一个基本的程序了用来判断用户输了数据没有,下我们先看看html代码 <form name = gfrom > <input  type=text name=textvalue /> <input name=aa type=submit value=ok onclick="checkGoogleValue()" /> </form> function checkGoogleValue(){ var textvalue=document.