输入框的字数时时统计—关于 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 相关文章推荐
js继承 Base类的源码解析
Dec 30 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
学习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 JS Ip地址及域名格式检测代码
2013/09/27 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python错误处理操作示例
2018/07/18 Python
对Python信号处理模块signal详解
2019/01/09 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
python调用私有属性的方法总结
2020/07/24 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
Spy++的使用方法及下载教程
2021/01/29 Python
优秀团员个人的自我评价
2013/10/02 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
车辆转让协议书
2014/04/15 职场文书
校园安全广播稿范文
2014/09/25 职场文书
长城英文导游词
2015/01/30 职场文书
三峡大坝导游词
2015/01/31 职场文书
故宫英文导游词
2015/01/31 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python