textarea自适应高度
2013-07-31 12:09
211 查看
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文本框根据输入内容自适应高度</title> <style type="text/css"> #textarea { font: 1.4em/1.8em Arial; overflow: hidden; width: 550px; height: 6em; padding:10px; } </style> <script src="autoTextarea.js"></script> </head> <body style="background:#FBFCFD url(http://goo.gl/kLsZX);"> <textarea id="textarea"></textarea> <script> var text = document.getElementById("textarea"), tip = '想写点什么..'; autoTextarea(text);// 调用 text.value = tip; text.onfocus = function () { if (text.value === tip) text.value = ''; }; text.onblur = function () { if (text.value === '') text.value = tip; }; </script> </body> </html>
var autoTextarea = function (elem, extra, maxHeight) {extra = extra || 20;var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),addEvent = function (type, callback) {elem.addEventListener ?elem.addEventListener(type, callback, false) :elem.attachEvent('on' + type, callback);},getStyle = elem.currentStyle ? function (name) {var val = elem.currentStyle[name];if (name === 'height' && val.search(/px/i) !== 1) {var rect = elem.getBoundingClientRect();return rect.bottom - rect.top -parseFloat(getStyle('paddingTop')) -parseFloat(getStyle('paddingBottom')) + 'px';};return val;} : function (name) {return getComputedStyle(elem, null)[name];},minHeight = parseFloat(getStyle('height'));elem.style.maxHeight = elem.style.resize = 'none';var change = function () {var scrollTop, height,padding = 0,style = elem.style;if (elem._length === elem.value.length) return;elem._length = elem.value.length;if (!isFirefox && !isOpera) {padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));};scrollTop = document.body.scrollTop || document.documentElement.scrollTop;elem.style.height = minHeight + 'px';if (elem.scrollHeight > minHeight) {if (maxHeight && elem.scrollHeight > maxHeight) {height = maxHeight - padding;style.overflowY = 'auto';} else {height = elem.scrollHeight - padding;style.overflowY = 'hidden';};style.height = height + extra + 'px';scrollTop += parseInt(style.height) - elem.currHeight;document.body.scrollTop = scrollTop;document.documentElement.scrollTop = scrollTop;elem.currHeight = parseInt(style.height);};};addEvent('propertychange', change);addEvent('input', change);addEvent('focus', change);change();};
相关文章推荐
- textarea 高度自适应
- textarea如何实现高度自适应(不出现滚动条)?
- textarea自适应高度
- div模拟textarea以实现高度自适应实例页面
- Textarea 高度自适应 根据内容自适应高度
- 如何让textarea、kindeditor的高度自适应呢?
- textarea高度自适应
- js实现textarea高度根据内容自适应
- 模拟新浪微博评论textarea输入框随着输入内容增多输入框高度自适应
- jquery实现文本框textarea自适应高度
- Jquery插件----TextArea高度自适应
- React textarea自适应文字高度伸缩 超简单版
- Textarea 高度自适应 根据内容自适应高度
- js实现textarea高度根据内容自适应
- textarea自动换行,且文本框根据输入内容自适应高度
- textarea自适应高度
- textarea 自适应高度
- 结合jquery,使得textarea自适应高度,并且提示层跟随光标移动
- textarea动态增加高度(自适应高度)简单实例
- textarea如何实现高度自适应?