输入框的字数时时统计—关于 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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
js实现简单计算器
Nov 22 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
redux.js详解及基本使用
May 24 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 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
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
destoon官方标签大全
2014/06/20 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
采用call方式实现js继承
2014/05/20 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
vue实现拖拽效果
2019/12/23 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
python数组过滤实现方法
2015/07/27 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
副总经理岗位职责
2014/03/16 职场文书
终止合同协议书
2014/04/17 职场文书
大专毕业生求职信
2014/07/05 职场文书
2015年依法行政工作总结
2015/04/29 职场文书