检测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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
jQuery功能函数详解
Feb 01 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
JS前端加密算法示例
Dec 22 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
从php核心代码分析require和include的区别
2011/01/02 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
ext实现完整的登录代码
2008/08/08 Javascript
js一组验证函数
2008/12/20 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
你真的了解Python的random模块吗?
2017/12/12 Python
python gdal安装与简单使用
2019/08/01 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Python 图片处理库exifread详解
2021/02/25 Python
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
办公室前台岗位职责
2014/01/04 职场文书
同学聚会主持词
2014/03/18 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
师范生小学见习总结
2015/06/23 职场文书
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript