检测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 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
javascript常用函数(1)
Nov 04 Javascript
jQuery+css实现的换页标签栏效果
Jan 27 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
vue实现图片上传功能
May 28 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
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
论建造顺序的重要性
2020/03/04 星际争霸
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
Python装饰器用法示例小结
2018/02/11 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python 多线程串行和并行的实例
2019/02/22 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
数控专业大学生的自我鉴定
2013/11/13 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
小学新学期教师寄语
2014/01/18 职场文书
网络程序员自荐信
2014/01/25 职场文书
制作部班长职位说明书
2014/02/26 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
英文演讲稿
2014/05/15 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL
Golang中channel的原理解读(推荐)
2021/10/16 Golang
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL