检测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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
javascript实现智能手环时间显示
Sep 18 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的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php使用GeoIP库实例
2014/06/27 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
Symfony查询方法实例小结
2017/06/28 PHP
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
node实现登录图片验证码的示例代码
2018/04/20 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
vue配置多代理服务接口地址操作
2020/09/08 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python程序退出方式小结
2017/12/09 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
大学生工作推荐信范文
2013/12/02 职场文书
银行员工辞职信范文
2014/01/20 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
连带责任保证书
2014/04/29 职场文书
重阳节慰问信
2015/02/15 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL