还有另一个关于这个的帖子，我试过了。但有一个问题:如果你删除内容，文本区域不会缩小。我找不到任何方法将其缩小到正确的大小- clientHeight值返回为文本区域的完整大小，而不是它的内容。
该页面的代码如下:
function FitToContent(id, maxHeight)
{
var text = id && id.style ? id : document.getElementById(id);
if ( !text )
return;
var adjustedHeight = text.clientHeight;
if ( !maxHeight || maxHeight > adjustedHeight )
{
adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
if ( maxHeight )
adjustedHeight = Math.min(maxHeight, adjustedHeight);
if ( adjustedHeight > text.clientHeight )
text.style.height = adjustedHeight + "px";
}
}
window.onload = function() {
document.getElementById("ta").onkeyup = function() {
FitToContent( this, 500 )
};
}
我在常见的浏览器中测试了脚本，在Chrome和Safari中失败了。这是因为不断更新的scrollHeight变量。
我已经使用jQuery应用了wrettledgoat脚本，并添加了chrome修复
function fitToContent(/* JQuery */text, /* Number */maxHeight) {
var adjustedHeight = text.height();
var relative_error = parseInt(text.attr('relative_error'));
if (!maxHeight || maxHeight > adjustedHeight) {
adjustedHeight = Math.max(text[0].scrollHeight, adjustedHeight);
if (maxHeight)
adjustedHeight = Math.min(maxHeight, adjustedHeight);
if ((adjustedHeight - relative_error) > text.height()) {
text.css('height', (adjustedHeight - relative_error) + "px");
// chrome fix
if (text[0].scrollHeight != adjustedHeight) {
var relative = text[0].scrollHeight - adjustedHeight;
if (relative_error != relative) {
text.attr('relative_error', relative + relative_error);
}
}
}
}
}
function autoResizeText(/* Number */maxHeight) {
var resize = function() {
fitToContent($(this), maxHeight);
};
$("textarea").attr('relative_error', 0);
$("textarea").each(resize);
$("textarea").keyup(resize).keydown(resize);
}
我能够设置TextArea大小在IE9和Chrome与下面的jQuery函数。它绑定到$(document).ready()函数中定义的选择器中的textarea对象。
function autoResize(obj, size) {
obj.keyup(function () {
if ($(this).val().length > size-1) {
$(this).val( function() {
$(this).height(function() {
return this.scrollHeight + 13;
});
alert('The maximum comment length is '+size+' characters.');
return $(this).val().substring(0, size-1);
});
}
$(this).height(function() {
if ($(this).val() == '') {
return 15;
} else {
$(this).height(15);
return ($(this).attr('scrollHeight')-2);
}
});
}).keyup();
}
在我的$(document).ready()函数中，我对本页上的所有textarea调用有以下调用。
$('textarea').each( function() {
autoResize($(this), 250);
});
其中250是文本区域的字符限制。这将增加到文本大小所允许的大小(基于您的字符数和字体大小)。当您从文本区域中删除字符或用户最初粘贴了太多文本时，它还会适当地缩小文本区域。
如果你不需要支持IE8，你可以使用input事件:
var resizingTextareas = [].slice.call(document.querySelectorAll('textarea[autoresize]'));
resizingTextareas.forEach(function(textarea) {
textarea.addEventListener('input', autoresize, false);
});
function autoresize() {
this.style.height = 'auto';
this.style.height = this.scrollHeight+'px';
this.scrollTop = this.scrollHeight;
window.scrollTo(window.scrollLeft,(this.scrollTop+this.scrollHeight));
}
现在你只需要添加一些CSS，你就完成了:
textarea[autoresize] {
display: block;
overflow: hidden;
resize: none;
}
用法:
<textarea autoresize>Type here and I’ll resize.</textarea>
你可以在我的博客文章中阅读更多关于它是如何工作的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Textarea autoresize</title>
<style>
textarea {
overflow: hidden;
}
</style>
<script>
function resizeTextarea(ev) {
this.style.height = '24px';
this.style.height = this.scrollHeight + 12 + 'px';
}
var te = document.querySelector('textarea');
te.addEventListener('input', resizeTextarea);
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>
在Firefox 14和Chromium 18中测试。数字24和12是任意的，测试一下看看哪个最适合你。
你可以不使用样式和脚本标记，但这会变得有点混乱(这是老式的HTML+JS，不鼓励使用)。
<textarea style="overflow: hidden" onkeyup="this.style.height='24px'; this.style.height = this.scrollHeight + 12 + 'px';"></textarea>
编辑:现代化的代码。将onkeyup属性更改为addEventListener。
编辑:keydown工作比keyup更好
编辑:在使用之前声明函数
编辑:输入工作更好的按键(thnx @WASD42 & @MA-Maddin)
斯菲德尔
对于那些想要在宽度和高度上自动调整文本区域的人:
HTML:
<textarea class='textbox'></textarea>
<div>
<span class='tmp_textbox'></span>
</div>
CSS:
.textbox,
.tmp_textbox {
font-family: 'Arial';
font-size: 12px;
resize: none;
overflow:hidden;
}
.tmp_textbox {
display: none;
}
jQuery:
$(function(){
//alert($('.textbox').css('padding'))
$('.textbox').on('keyup change', checkSize)
$('.textbox').trigger('keyup')
function checkSize(){
var str = $(this).val().replace(/\r?\n/g, '<br/>');
$('.tmp_textbox').html( str )
console.log($(this).val())
var strArr = str.split('<br/>')
var row = strArr.length
$('.textbox').attr('rows', row)
$('.textbox').width( $('.tmp_textbox').width() + parseInt($('.textbox').css('padding')) * 2 + 10 )
}
})
Codepen:
http://codepen.io/anon/pen/yNpvJJ
欢呼,
