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);
// }
// });