检测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 13 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 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
simplehtmldom Doc api帮助文档
2012/03/26 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
Python中的迭代器漫谈
2015/02/03 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
Python requests获取网页常用方法解析
2020/02/20 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
对python中list的五种查找方法说明
2020/07/13 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
员工自我鉴定范文
2013/10/06 职场文书
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
高中军训感言800字
2014/03/05 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers