使用自动调整大小创建一个textarea [英] Creating a textarea with auto-resize
问题描述
还有关于此的另一个线索，我试过了。但是有一个问题：如果删除内容， 该页面的代码如下： data / lang =jsdata-hide =falsedata-console =/> truedata-babel =false> textarea 不会缩小。我找不到任何缩小到正确尺寸的方法 - clientHeight 值的大小为 textarea
函数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;
$ b $ window.onload = function（）{
document.getElementById（ta）。onkeyup = function（）{
FitToContent （this，500）
};
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）; };}函数init（）{var text = document.getElementById（'text'）; function resize（）{text.style.height ='auto'; text.style.height = text.scrollHeight +'px'; } / * 0超时获取已经改变的文本* / function delayedResize（）{window.setTimeout（resize，0）;观察（文本，'改变'，调整大小）;观察（文本，'cut'，delayedResize）;观察（文本，'粘贴'，delayedResize）;观察（文本，'drop'，delayedResize）;观察（文本，'keydown'，delayedResize）; text.focus（）; text.select（）; resize（）;} textarea {border：0 none white ;溢出：隐藏;填充：0;概要：无; background-color：＃D0D0D0;} < body onload =init（）;>< textarea rows =1style =height：1em; id =text>< / textarea>< / body>
如果你想试试 jsfiddle
它以单一并且只增长必要的确切数量。对于单个 textarea 是可以的，但是我想写一些我会有许多这样的 textarea s的东西（大约一个人通常会在一个大型文本文档中有行）。在这种情况下，它确实很慢。 （在Firefox中，它非常慢）。所以我真的想要一种使用纯CSS的方法。这可以通过 contenteditable 来实现，但我希望它只是纯文本。
There was another thread about this, which I've tried. But there is one problem: the textarea doesn't shrink if you delete the content. I can't find any way to shrink it to the correct size - the clientHeight value comes back as the full size of the textarea, not its contents.
The code from that page is below:
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 )
};
}
This works for me (Firefox 3.6/4.0 and Chrome 10/11):
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);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
textarea {
border: 0 none white;
overflow: hidden;
padding: 0;
outline: none;
background-color: #D0D0D0;
}
<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
If you want try it on jsfiddle
It starts with a single line and grows only the exact amount necessary. It is ok for a single textarea, but I wanted to write something where I would have many many many such textareas (about as much as one would normally have lines in a large text document). In that case it is really slow. (In Firefox it's insanely slow.) So I really would like an approach that uses pure CSS. This would be possible with contenteditable, but I want it to be plaintext-only.
这篇关于使用自动调整大小创建一个textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
