文本框自适应高度方式的收集
在实际开发中,我们总是会遇到大文本的输入,这时候就要使用文本框textarea,但是textarea有个缺陷,那就是它的高度有限,一旦超过高度,就会有滚动条,用户体验不好.如果一开始将高度设置的太高,页面布局又会不好看.所以.这时候需要它自动适应高度,随着输入的内容增高和变矮.
关于文本框自适应高度,我目前知道三种方式:
- 绑定编辑器
- 使用div
- 文本框自身自适应高度
至于要使用哪种方式,根据自身实际情况来考虑,适合自己的就是最好的
如果遇到IE不支持,需要在head中加上
1.关于绑定编辑器,没什么好说的,只要下载个编辑器控件,照着文档做就行了
2.使用div,使用div时,需要使用一个隐藏textarea来存储数据,这种组合,其实就是编辑器的实现方式.
使用div时,主要是通过css加div的contenteditable="true"属性来实现,
其中,有个最大高度和最小高度的设置,当超过最大高度时.会出现滚动条.如果不想要最大高度的话,可以将最大高度设置删除删除.
<html>
<head>
<meta charset="UTF-8">
<title>使用div模拟文本域,实现文本域高度自适应title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" >script>
<style>
h2 {
text-align: center;
margin: 50px auto;
}
.test_box {
width: 400px;
min-height: 20px;
/*设置最小高度*/
max-height: 1000px;
/*设置最大高度超过300px时出现滚动条*/
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 13px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 16px;
line-height: 24px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
style>
head>
<body>
<h2>div模拟textarea文本域轻松实现高度自适应h2>
<div class="test_box" contenteditable="true" id="tdiv">
div>
body>
html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
#textarea {
width: 100px;
min-height: 20px;
outline: 0;
border: 1px solid #397EFF;
font-size: 13px;
overflow-x: hidden;
overflow-y: auto;
-webkit-user-modify: read-write-plaintext-only;
}
[contentEditable=true]:empty:not(:focus):before {
content: attr(data-text);
}
style>
head>
<body>
<div id="textarea" contenteditable="true" data-text="输入内容...">div>
body>
html>
3.文本框自身
第一种
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
<script>
$(function() {
$.fn.autoHeight = function() {
function autoHeight(elem) {
elem.style.height = 'auto';
elem.scrollTop = 0; //防抖动
elem.style.height = elem.scrollHeight + 'px';
}
this.each(function() {
autoHeight(this);
$(this).on('keyup', function() {
autoHeight(this);
});
});
}
$('textarea[autoHeight]').autoHeight();
})
script>
head>
<body>
<h2>文本框根据输入内容自适应高度h2>
<textarea autoHeight="true" > textarea>
body>
html>
第二种
<html>
<head>
<meta charset="UTF-8">
<title>文本框高度自适应title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
<style type="text/css">
h2 {
text-align: center;
margin: 50px auto;
}
#textarea {
display: block;
margin: 0 auto;
overflow: hidden;
width: 550px;
font-size: 14px;
height: 18px;
line-height: 24px;
padding: 2px;
}
textarea {
outline: 0 none;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}
style>
<script>
$(function() {
$.each($("textarea"), function(i, n) {
autoTextarea($(n)[0]);
});
})
/**
* 文本框根据输入内容自适应高度
* @param {HTMLElement} 输入框元素
* @param {Number} 设置光标与输入框保持的距离(默认0)
* @param {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 = '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();
};
script>
head>
<body>
<h2>文本框根据输入内容自适应高度h2>
<textarea id="textarea" placeholder="回复内容">textarea>
body>
html>
第三种
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
<script>
$(function() {
var textarea = document.getElementById('textarea');
makeExpandingArea(textarea);
})
function makeExpandingArea(el) {
var timer = null;
//由于ie8有溢出堆栈问题，故调整了这里
var setStyle = function(el, auto) {
if(auto) el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
}
var delayedResize = function(el) {
if(timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function() {
setStyle(el)
}, 200);
}
if(el.addEventListener) {
el.addEventListener('input', function() {
setStyle(el, 1);
}, false);
setStyle(el)
} else if(el.attachEvent) {
el.attachEvent('onpropertychange', function() {
setStyle(el)
})
setStyle(el)
}
if(window.VBArray && window.addEventListener) { //IE9
el.attachEvent("onkeydown", function() {
var key = window.event.keyCode;
if(key == 8 || key == 46) delayedResize(el);
});
el.attachEvent("oncut", function() {
delayedResize(el);
}); //处理粘贴
}
}
script>
head>
<body>
<h2>文本框根据输入内容自适应高度h2>
<textarea id="textarea">textarea>
body>
html>
第四种
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">script>
<style>
textarea,
pre {
margin: 0;
padding: 0;
outline: 0;
border: 0;
}
.expandingArea {
position: relative;
border: 1px solid #888;
background: #fff;
}
.expandingArea textarea,
.expandingArea pre {
padding: 5px;
background: transparent;
font: 400 13px/16px helvetica, arial, sans-serif;
/* Make the text soft-wrap */
white-space: pre-wrap;
word-wrap: break-word;
}
.expandingArea textarea {
/* The border-box box model is used to allow
* padding whilst still keeping the overall width
* at exactly that of the containing element.
*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
/* This height is used when JS is disabled */
height: 100px;
}
.expandingArea.active textarea {
/* Hide any scrollbars */
overflow: hidden;
position: absolute;
top: 0;
left: 0;
height: 100%;
/* Remove WebKit user-resize widget */
resize: none;
}
.expandingArea pre {
display: none;
}
.expandingArea.active pre {
display: block;
/* Hide the text; just using it for sizing */
visibility: hidden;
}
style>
head>
<body>
<h2>文本框根据输入内容自适应高度h2>
<div class="expandingArea " id="textarea">
<pre><span>span><br>pre>
<textarea id="idText">textarea>
div>
<script>
function makeExpandingArea(container) {
var area = container.getElementsByTagName('textarea')[0];
var span = container.getElementsByTagName('span')[0];
if(area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if(area.attachEvent) {
area.attachEvent('onpropertychange', function() {
var html = area.value.replace(/\n/g, '
');
span.innerText = html;
});
var html = area.value.replace(/\n/g, '
');
span.innerText = html;
}
if(window.VBArray && window.addEventListener) { //IE9
area.attachEvent("onkeydown", function() {
var key = window.event.keyCode;
if(key == 8 || key == 46) span.textContent = area.value;
});
area.attachEvent("oncut", function() {
span.textContent = area.value;
}); //处理粘贴
}
container.className += "active";
}
var areas = document.getElementById('textarea');
makeExpandingArea(areas);
script>
body>
html>