检测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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
Vue 项目分环境打包的方法示例
Aug 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模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
教你如何使用php session
2013/10/28 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
Js组件的一些写法
2010/09/10 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
jstree的简单实例
2016/12/01 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
python 获取et和excel的版本号
2009/04/09 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
解决Django no such table: django_session的问题
2020/04/07 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
劳动实践课感言
2014/02/01 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
个人授权委托书范本
2014/09/14 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
教师岗位职责
2015/02/03 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python
详解OpenCV曝光融合
2022/04/29 Python