输入框的字数时时统计—关于 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 相关文章推荐
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
JS轮播图的实现方法2
Aug 25 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
用函数读出数据表内容放入二维数组
2006/10/09 PHP
快速配置PHPMyAdmin方法
2008/06/05 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
非常实用的php验证码类
2016/05/15 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Numpy中的mask的使用
2018/07/21 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
简单了解python变量的作用域
2019/07/30 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
员工保密协议书
2014/09/27 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
九年级数学教学反思
2016/02/17 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
Pandas-DataFrame知识点汇总
2022/03/16 Python