检测input每次的输入是否合法遇到汉字输入就有问题


Posted in Javascript onMay 23, 2012

记录一下资料,就这几天测试一下 然后发布成果

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

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

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

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

执行上面一段代码,会发现弹出了1和[object],这说明该事件只给回调函数传入一个参数而且是object类型。
那我们就试试遍历一下这个object。
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!-- 
document.getElementById('xx').attachEvent('onpropertychange',function(o){ 
for(var item in o){ 
alert(item+":"+o[item]); 
} 
}); 
//--> 
</script>

执行一下,发现有很多个属性,但仔细看我们可能会发现这么一个属性:propertyname,相信每个人都能猜到这个属性的意思了。对,这个就是用来获取哪个属性被修改的。
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'"> 
<script type="text/javascript"> 
<!-- 
document.getElementById('xx').attachEvent('onpropertychange',function(o){ 
alert(o.propertyName); 
}); 
//--> 
</script>

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

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

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

三.让FF支持onPropertyChange类似的效果

之前做了个对input框的实时校验,比如只允许输入数字,用户输入的却是字母等,这时候就把用户输入的值变为红色等...或者对textarea文本域剩余可输入字符的提示,就遇到了一个问题,使用onPropertyChange在IE下很好很正常,但是在FF上就么效果鸟~~~

于是在网上就找到了一个可行性方法~~ Firefox有个oninput事件效果和onPropertyChange一样,所以同时加上oninput和onPropertyChange问题就解决鸟~~~ oo....

<input type="text" oninput="cgColor(this);" onPropertyChange="cgColor(this);" maxlength="4" name="pt_bankou" id="pt_bankou" value="" />

Javascript 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
浅谈document.write()输出样式
May 07 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
localStorage实现便签小程序
Nov 28 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 #Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 #Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 #Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 #Javascript
Javascript 面向对象(三)接口代码
May 23 #Javascript
Javascript 面向对象(二)封装代码
May 23 #Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 #Javascript
You might like
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python生成器generator用法示例
2018/08/10 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
体育教育专业毕业生自荐信
2013/11/15 职场文书
暑期学习心得体会
2014/09/02 职场文书
女生抽烟检讨书
2014/10/05 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
学生会辞职信
2015/03/02 职场文书