1.封装方法:
var textareaListener = { /*事件监听器兼容 * *attachEvent——兼容:IE7、IE8;不兼容firefox、chrome、IE9、IE10、IE11、safari、opera *addEventListener——兼容:firefox、chrome、IE、safari、opera;不兼容IE7、IE8 * */ compatibleEvtListener: function () { var observe; if (window.attachEvent) { observe = function (element, event, handler) { element.attachEvent('on' + event, handler); }; } else { observe = function (element, event, handler) { element.addEventListener(event, handler, false); }; } return observe },
/*初始化方法
*
*params说明:dom-传入的textarea标签,maxLength-允许输入的最大长度,isBottom-textarea标签是否在页面最底部(用于解决在ie浏览器textarea输入内容时,页面滚动条跳动的问题,,如果不在底部出现跳动,这个问题我还没想好~)
*
*/ init: function (dom, maxLength,isBottom) { var _this = textareaListener; var textarea = dom[0]; var strLength = textarea.value.length; var observe = _this.compatibleEvtListener(); dom.after('<span class="tip" style="font-size:12px;color:#666;position:relative;float:right;margin-top:-27px;"><span class="str">' + strLength + '</span>/' + maxLength + '</span>'); observe(textarea, 'change', resize); observe(textarea, 'cut', delayedResize); observe(textarea, 'paste', delayedResize); observe(textarea, 'drop', delayedResize); observe(textarea, 'keydown', delayedResize); resize('init'); function delayedResize(){ window.setTimeout(resize, 0); } function resize(isInit) { textarea.style.height = 'auto'; textarea.style.height = textarea.scrollHeight + 'px'; if (!isInit && isBottom) $(document).scrollTop($(document).height()); if (textarea.value.length > maxLength) { dom.next('.tip').html('已超过限定字符长度!').css('color', '#c8152d'); } else { dom.next('.tip').html('<span class="str">' + textarea.value.length + '</span>/' + maxLength + '</span>').css('color', '#666');; } } } }
2.调用:
$('textarea').each(function () { var _this = $(this); textareaListener.init(_this, '10'); })