输入框的字数时时统计—关于 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 function代码
May 23 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
详解package.json版本号规则
Aug 01 Javascript
jQuery实现滑动开关效果
Aug 02 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
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
解决yum对python依赖版本问题
2019/07/05 Python
python是怎么被发明的
2020/06/15 Python
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
人事主管的岗位职责
2013/11/16 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
志愿者个人总结
2015/03/03 职场文书
课题研究阶段性总结
2015/08/13 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
Python 阶乘详解
2021/10/05 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL
python三子棋游戏
2022/05/04 Python