输入框的字数时时统计—关于 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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
如何在vue中使用jointjs过程解析
May 29 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计算当前程序执行时间示例
2014/04/24 PHP
php实现encode64编码类实例
2015/03/24 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
js树形控件脚本代码
2008/07/24 Javascript
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
用Python抢过年的火车票附源码
2015/12/07 Python
python中range()与xrange()用法分析
2016/09/21 Python
django框架自定义用户表操作示例
2018/08/07 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
询价采购方案
2014/06/09 职场文书
董事长新年致辞
2015/07/29 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript