输入框的字数时时统计—关于 onpropertychange 和 oninput 使用


Posted in Javascript onOctober 21, 2011

网上看到很方便实现这个功能的事件:
IE 中的 onpropertychange
非IE中的 oninput
用这两事件的好处是,当在输入框的内容发生变化调用事件,使用key 和 mouse的相关事件会比较复杂,而且这个方法用粘贴方法一样有效。 不过用js改变input的value值不会发生这两个事件。
在中文本框中添加两个事件的方法就可以了。(看到网上说非ie中的oninput方法要用addEventListener绑定,用 element.oninput = function(){...}不行,可是我在火狐6中是可以的,不过为了安全起见,这里我还是使用标准的方法 element.addEventListener('input',function(){...})实现 )
在IE中 使用 element.attachEvent('onpropertychange', function(){...})方法。 不过,因为ie中会判断所有的属性发生变化,这样会发生很多不必要的工作,而且有时候会出现问题,无法调用函数。 所以这里我只对当value属性发生变化的时候进行判断(事件对象的propertyName属性),并调用方法。 结果是:
element.attachEvent('onpropertychange', function(){if(window.event.propertyName == "value"){...})

/* 
参数: 
length:最大长度 
ele: 输入对象 
callBack: 回调方法,参数len表示当前输入框内容字节数, 方法中的this指向ele对 
autoFire: 初使化自动调用一次 
*/ 
function input_max(length, ele, showEle, callBack,autoFire){ 
if(ele.addEventListener){ 
ele.addEventListener('input', change, false); 
}else{ 
ele.attachEvent('onpropertychange', function(){if(window.event.propertyName == "value"){alert('a');change()}}) 
} 
function change(){ 
var len = Math.ceil(byteLength(ele.value)/2); 
len = len <= length ? len : length - len; 
callBack.call(ele,showEle,len); 
}; 
function byteLength(b) { 
if (typeof b == "undefined") { return 0 } 
var a = b.match(/[^\x00-\x80]/g); 
return (b.length + (!a ? 0 : a.length)) 
}; 
//自动调用一次 
if(autoFire){change()}; 
}; 
// 回调函数 
function input_max_callBack(showEle,len){ 
var note = showEle; 
if (len >= 0 ){ 
note.innerHTML = len ; 
this.style.borderColor = ""; 
this.style.backgroundColor = ""; 
}else{ 
note.innerHTML = "<span class='red b fz_14'>超过" + -len + "</span>"; 
this.style.backgroundColor = "#FFC"; 
this.style.borderColor = "#F00"; 
} 
} 
// 动态标题 
input_max(30, document.getElementById('news_title'), document.getElementById('news_title_limit'),input_max_callBack,true);
Javascript 相关文章推荐
怎么用javascript进行拖拽
Jul 20 Javascript
jQuery 前的按键判断代码
Mar 19 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
学习JavaScript的最佳方法分享
Oct 21 #Javascript
修复IE9&amp;safari 的sort方法
Oct 21 #Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 #Javascript
jquery ajax return没有返回值的解决方法
Oct 20 #Javascript
IE与FireFox中的childNodes区别
Oct 20 #Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 #Javascript
基于jquery的$.ajax async使用
Oct 19 #Javascript
You might like
木翼下载系统中说明的PHP安全配置方法
2007/06/16 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
python定时器使用示例分享
2014/02/16 Python
python中执行shell命令的几个方法小结
2014/09/18 Python
python中threading超线程用法实例分析
2015/05/16 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Python函数中的可变长参数详解
2019/09/12 Python
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
岗位竞聘演讲稿
2014/01/10 职场文书
庆祝国庆节标语
2014/10/09 职场文书
单位介绍信格式
2015/01/31 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
不同意离婚答辩状
2015/05/22 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
python munch库的使用解析
2021/05/25 Python
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
opencv检测动态物体的实现
2021/07/21 Python
警用民用对讲机找不同
2022/02/18 无线电