输入框的字数时时统计—关于 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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
jQuery 性能优化指南(2)
May 21 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
详解webpack的文件监听实现(热更新)
Sep 11 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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
Discuz 模板引擎的封装类代码
2008/07/18 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
python实现顺序表的简单代码
2018/09/28 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
网络工程师职业规划
2014/02/10 职场文书
客房领班岗位职责
2015/02/11 职场文书
学校中秋节活动总结
2015/03/23 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
趣味运动会赞词
2015/07/22 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
七年级作文之游记
2019/12/11 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang