检测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中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
js刷新页面location.reload()用法详解
Dec 09 Javascript
JavaScript中的几种继承方法示例
Dec 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生成静态页
2006/11/25 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
ajax请求data遇到的问题分析
2018/01/18 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
python各类经纬度转换的实例代码
2019/08/08 Python
python根据时间获取周数代码实例
2019/09/30 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
党员的自我评价范文
2014/01/02 职场文书