textarea高度自适应且不出现滚动条

最近有一个需求就是需要给textarea设置高度自适应，百度了很多
都不怎么好用，现在来总结下我的解决办法：

一开始用的下面这个方法：

元素class：textarea-auto，id：adrProcedure
$(function(){$(".textarea-auto").focus(function () {$('textarea').each(function () {this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');}).on('input', function () {this.style.height = 'auto';this.style.height = (this.scrollHeight) + 'px';});});})

输入是没问题的，但是初始状态是需要动作focus触发的，如果想要实现初始状态自适应有两个方式：
1）第一种需要加自触发：因为直接写$(".textarea-auto").focus()不好使，所以需要结合定时器，这种比较适用于动态的元素

 //进页面文本域如果有值的话自动获取光标使其自适应文字高度：写在最前面的位置setTimeout(function(){if ($(".textarea-auto").val() != "") {$(".textarea-auto").focus();}},300);

2）如果是元素的内容的静态的话，就可以用以下的方法：
源自@樊小书生

因为这个方法里面的elem是是DOM，不是jquery对象，所以用jq的时候记得转换下或者直接用原生js获取元素$(function () {// 为每一个textarea绑定事件使其高度自适应$.each($(".textarea-auto"), function(i, n){autoTextarea($(n)[0]);});//如果是单个元素可以这么获取元素
//    var text = document.getElementById("adrProcedure");
//          autoTextarea(text);
//    var text = $("#adrProcedure")[0];
//          autoTextarea(text);
})
/*** 文本框根据输入内容自适应高度* {HTMLElement}   输入框元素* {Number}        设置光标与输入框保持的距离(默认0)* {Number}        设置最大高度(可选)*/
var autoTextarea = function (elem, extra, maxHeight) {extra = extra || 0;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.resize = '100%';//如果不希望使用者可以自由的伸展textarea的高宽可以设置其他值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高度自适应自动增高撑开
方法一:div模拟textarea文本域轻松实现高度自适应 demo演示地址:http://www.xuanfengge.com/demo/201308/textarea/demo1.html 因为t ...
textarea高度自适应
方法一.直接在textarea中添加oninput方法: <textarea οninput="this.style.height = this.scrollHeight + 'px' ...
html文本域高度自适应,textarea高度自适应，textarea随着内容高度变化
有时候我们需要textarea的高度随着内容的多少去自适应的变化,今天我使用了JS原生和JQ写了一个textarea的高度随着他的内容高度变化的代码,希望能帮上忙. 废话不多说直接贴代码: texta ...
【Css】移动端用flex实现DIV高度自适应屏幕和带滚动条效果（代码示例）
一.自适应高度 vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个.其中最大的那个 ...
html textarea 自动高度,HTML页面中textarea高度自适应解决方案
背景: 页面上加了一个div标签,div标签下有一个textarea标签,textarea的内容通过后台读取数据自动填充,希望通过textarea的高度随着内容的增减,自动调整,在网上说通过设置tex ...
CSS 实现内容区域高度自适应，超出有滚动条
代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8&q ...
css实现 textarea 高度自适应
此textarea非彼textarea ,有经验的老司机们应该知道html标签contenteditable这个属性. 利用此属性使当前的标签成为可以输入的状态,等同于输入框. 演示地址:https: ...
jQuery实现textarea高度自适应
js代码 $.fn.autoHeight = function () {function autoHeight(elem) {elem.style.height = 'auto';elem.scrol ...
div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制
需求: 文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,scrollHeigh这个无法获取实际内容的高度(我用的是那种简单的,可能我写的 ...
textarea如何实现高度自适应？
文章来源:http://blog.csdn.net/tianyitianyi1/article/details/49923069 转自:http://www.xuanfengge.com/textar ...

textarea高度自适应且不出现滚动条

textarea高度自适应且不出现滚动条相关推荐

最新文章

热门文章