输入框的字数时时统计—关于 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中将具有数字属性名的对象转换为数组
Mar 06 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
php跨域调用json的例子
Nov 13 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
JavaScript编写的网页小游戏,很给力
Aug 18 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 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的一些基础知识分享
2011/07/27 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
Python中的两个内置模块介绍
2015/04/05 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
如何基于python实现脚本加密
2019/12/28 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书