输入框的字数时时统计—关于 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 对象是否存在判断
Jul 15 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 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冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
python3 爬取图片的实例代码
2018/11/06 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
大学活动邀请函
2014/01/28 职场文书
土建施工员岗位职责
2014/07/16 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
预备党员考察意见范文
2015/06/01 职场文书
消防演习感想
2015/08/10 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
MYSQL常用函数介绍
2022/05/05 MySQL
PHP 时间处理类Carbon
2022/05/20 PHP