IE兼容性：IE8（含）及以上
IE8、IE9下的效果：
IE10、IE11及其他浏览器下的效果：
调用示例：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="padding-left: 20px;">
<textarea class="txt"></textarea>
<div id="f"><input type="" class="ipt" name=""></div>
<script type="text/javascript" src="maxlength.js"></script>
<script type="text/javascript">
var maxlength = new maxLengthZm({
el: ".txt", //必传参数
max: "30",
txtWidth: "500px",
txtHeight: "200px",
color: "blue",
callback: function(len){
console.log(len);
}
});
var maxlength1 = new maxLengthZm({
el: "body div#f .ipt", //必传参数
max: "15",
color: "#ccc",
callback: function(len){
console.log(len);
}
});
</script>
</body>
</html>
代码：
maxLengthZm = (function(){
var obj = function (options){
//封装一个专门处理参数的函数
this._setPara(options);
// 入口函数
this.init();
};
obj.prototype = {
//修正指针
constructor: obj,
// addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，
// Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；
// 但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。
// 事件监听函数兼容写法
_regEvent: function(ele, ieFnName , fnName, fun){
if (window.attachEvent){
ele.attachEvent(ieFnName, fun); //IE浏览器 此方法传入事件加on
}else{
ele.addEventListener(fnName, fun, false); //非IE浏览器 此方法传入事件不加on
}
},
// 实时更新剩余字数
_getNowLen: function(){
var self = this;
var inputFlag = true;
// 中文输入法下开始输入
self._regEvent(self.el,"oncompositionstart","compositionstart",function(){
inputFlag = false;
});
// 中文输入法下结束输入
self._regEvent(self.el,"oncompositionend","compositionend",function(){
inputFlag = true;
});
// 输入值变化
self._regEvent(self.el,"onpropertychange","input",function(e){
if(e.propertyName && e.propertyName!='value') return;
// 用定时器是因为input事件和compositionend事件会同时触发
// 如果用定时器 这个函数就会触发定时器
// 定时器的回调函数进栈等待被执行
setTimeout(function(e){
if(inputFlag){
// 实时更新剩余字数
self.restLen = self.max - self.el.value.length;
self.creatSpan.innerHTML = self.restLen + '/';
// 只有IE才会出现这种情况
if(self.restLen < 0){
// 超出字数限制
self.creatSpan.style.color = self.mColor;
}else{
// 未超出字数限制
self.creatSpan.style.color = self.fColor;
}
};
// 更新回调参数
self.callback(self.restLen);
},0)
})
},
// 初始化节点样式
_setStyle: function(){
var self = this;
// 最大长度 Internet Explorer 9 以及更早的版本不支持此方法。
self.el.setAttribute("maxlength",self.max);
// 父元素相对定位
self.el.style.position = "relative";
// textarea 限制拉伸动作 宽高写死
if(self.el.nodeName == "TEXTAREA"){
// 宽
self.el.style.width = self.txtWidth;
// 高
self.el.style.height = self.txtHeight;
// 禁止拉伸
self.el.style.resize = "none";
}
},
// 初始化字数提示内容
_creatDom: function(){
var self = this;
var tempDom = document.createElement("div");
var str = '';
str += '<span id="'+self.creatId+'">'+ self.max +'/</span>' + self.max;
// 获取传入节点的位置信息
// 这个偏移量是因为IE浏览器下textarea会出现一个很难看的滚动条
if(window.attachEvent && self.el.nodeName == "TEXTAREA"){
var X = self.el.offsetLeft + self.el.clientWidth + 25;
}else{
var X = self.el.offsetLeft + self.el.clientWidth + 8;
}
var Y = self.el.offsetTop + self.el.clientHeight - self.size.replace(/px/g,"");
tempDom.innerHTML = str;
// 设置创建的新元素的样式
tempDom.style.position = "absolute";
tempDom.style.left = X + "px";
tempDom.style.top = Y + "px";
tempDom.style.color = self.fColor;
tempDom.style.fontSize = self.size;
tempDom.style.top = Y + "px";
tempDom.style.zIndex = "100";
document.body.appendChild(tempDom);
},
//设置参数
_setPara: function (option){
this.el = document.querySelector(option.el);//节点对象 //必传参数 css选择器
this.creatId = option.el.replace(/[#>\.\s]/g,"_")+'_nowLen';
this.max = parseInt(option.max) || 20;//最长字数限制 默认20
//如果是textare 设置宽高 默认200×100
//参数形式 可以是字符串 可以是数字 也可以带单位 不带单位
this.txtWidth = (option.txtWidth + "").replace(/px/g,"") + "px"|| "200px";
this.txtHeight = (option.txtHeight + "").replace(/px/g,"") + "px" || "100px";
this.fColor = option.color || "#666";//文字 默认灰色
this.mColor = "red";//提示颜色 红色
this.size = option.size || "12px";//字体大小 默认12px
this.restLen = parseInt(option.max) || 20;//剩余字数 默认20
//回调函数
this.callback = option.callback || null;
},
callback: function(len){
return len;
},
// remove: function(){//注销事件
// removeEventListener();
// detachEvent();
// },
//入口函数
init: function (){
// 初始化节点样式
this._setStyle();
// 创建节点
this._creatDom();
// 监听事件
this._getNowLen();
// 创建节点之后可以获取到变化的span标签 存起来备用
this.creatSpan = document.getElementById(this.creatId);
}
};
return obj;
})();
// 兼容IE8 及以上版本 不兼容IE7
// 调用示例
// var maxlength = new maxLengthZm({
// el: ".txt",
// max: "300",
// txtWidth: "500px",
// txtHeight: "200px",
// color: "blue",
// callback: function(len){
// console.log(len);
// }
// });