检测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 相关文章推荐
javascript五图轮播切换实用版
Aug 17 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
js处理自己不能定义二维数组的方法详解
Mar 03 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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 图片上传代码
2011/09/13 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Python pandas常用函数详解
2018/02/07 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
校本教研工作制度
2014/01/22 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
增员口号大全
2014/06/18 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
技术入股合作协议书
2014/10/07 职场文书
世界环境日活动总结
2015/02/11 职场文书
接待员岗位职责
2015/02/13 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript