输入框的字数时时统计—关于 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 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
angular2使用简单介绍
Mar 01 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
深入探究node之Transform
2017/07/20 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
pyside写ui界面入门示例
2014/01/22 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
JVM是一个编译程序还是解释程序
2012/09/11 面试题
财务部出纳岗位职责
2013/12/22 职场文书
给同学的道歉信
2014/01/16 职场文书
投标邀请书范文
2014/01/31 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
公司外出活动方案
2014/08/14 职场文书
获奖感言一句话
2015/07/31 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL