输入框的字数时时统计—关于 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中关于break,continue的特殊用法与介绍
May 24 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
vue实现移动端input上传视频、音频
Aug 18 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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php+highchats生成动态统计图
2014/05/21 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
Python入门学习之字符串与比较运算符
2015/10/12 Python
Python书单 不将就
2017/07/11 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python字符串的index和find的区别详解
2020/06/20 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
食品流通安全承诺书
2014/05/22 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers