输入框的字数时时统计—关于 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和CSS速查手册
Aug 20 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
学习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
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
javascript整除实现代码
2010/11/23 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
python使用opencv进行人脸识别
2017/04/07 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
python tkinter实现屏保程序
2019/07/30 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
C语言编程题
2015/03/09 面试题
文员自我评价怎么写
2013/09/19 职场文书
企业年会主持词
2014/03/27 职场文书
2014年安全生产责任书
2014/07/22 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
奖励通知
2015/04/22 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
CSS 伪元素::marker详解
2021/06/26 HTML / CSS