检测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使用查询手册
Mar 07 Javascript
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
javascript json 新手入门文档
Dec 03 Javascript
select标记美化--JS式插件、后期加载
Apr 01 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
Javascript实现基本运算器
Jul 15 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
antd配置config-overrides.js文件的操作
Oct 31 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注销代码(session注销)
2012/05/31 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
python实现求最长回文子串长度
2018/01/22 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python模拟斗地主发牌
2020/04/22 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
院药学专业个人求职信
2013/09/21 职场文书
企业项目策划书
2014/01/11 职场文书
药店主任岗位责任制
2014/02/10 职场文书
《自然之道》教学反思
2014/02/11 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
新郎新娘答谢词
2015/01/04 职场文书
伏羲庙导游词
2015/02/09 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
八年级数学教学反思
2016/02/17 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL