检测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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
jQuery表单域选择器用法分析
Feb 10 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
vue使用video插件vue-video-player的示例
Oct 03 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中的一些数组排序方法分享
2012/07/20 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
php实现简单的上传进度条
2015/11/17 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python发送告警邮件脚本
2018/09/17 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
opencv+python实现均值滤波
2020/02/19 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
公务员转正鉴定材料
2014/02/11 职场文书
医药销售自我评价200字
2014/09/11 职场文书
教师节联欢会主持词
2015/07/04 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
礼貌问候语大全
2015/11/10 职场文书
高一语文教学反思
2016/02/16 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js
优化Mysql查询的示例
2022/04/26 MySQL
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers