检测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中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
vue实现购物车小案例
Sep 27 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
PHP+jquery+ajax实现分页
2016/12/09 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
js实现无缝轮播图
2020/03/09 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
动态创建类实例代码
2009/10/07 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python引用模块和查找模块路径
2016/03/17 Python
python3.5 tkinter实现页面跳转
2018/01/30 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
网上开店必备创业计划书
2014/01/26 职场文书
触摸春天教学反思
2014/02/03 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
销售求职信范文
2014/05/26 职场文书
2014年技术部工作总结
2014/12/12 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
运动员加油词
2015/07/18 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers