JavaScript创建具有自动调整大小的文本区域
有关于这个另一个线程，我已经试过。但是有一个问题：textarea删除内容不会缩小。我找不到任何将其缩小为正确大小的方法-该clientHeight值会以的完整大小返回textarea，而不是其内容的大小。
该页面上的代码如下：
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 )
};
}
问题答案：
这对我有效（Firefox 3.6 / 4.0和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>
如果您想在jsfiddle上尝试它，它以一行开始，并且仅增长所需的确切数量。可以使用一个textarea，但是我想写一些这样textarea的东西（在一个大的文本文档中通常有几行）。在那种情况下，它真的很慢。（在Firefox中，它是如此之慢。）因此，我真的很想使用纯CSS的方法。使用，这是可能的contenteditable，但是我希望它只能是纯文本格式。
-
问题内容： 有关于这个另一个线程，我已经试过。但是有一个问题：删除内容不会缩小。我找不到任何将其缩小为正确大小的方法-该值会以的完整大小返回，而不是其内容的大小。 该页面上的代码如下： 问题答案： 这对我有效（Firefox 3.6 / 4.0和Chrome 10/11）： _如果您想在jsfiddle _上尝试它，它以一行开始，并且仅增长所需的确切数量。可以使用一个，但是我想写一些这样的东西（在
-
问题内容： 我一直试图（徒劳地）建立一个页面，当我更改窗口大小时，其元素将重新调整大小。我可以在CSS中使用它来处理图像，但是没有问题，但是我似乎无法在文本上完成相同的操作，而且我不确定在CSS中是否有可能。而且我似乎找不到能完成此任务的jQuery脚本。 当用户调整窗口大小时，我实质上希望页面能够动态流畅地缩放，而无需用户调用页面缩放。通过css在我的img div上这可以正常工作，但对于文本则
-
Android最近增加了根据视图大小以及最小和最大文本大小调整TextViews文本大小的支持。 https://developer.Android.com/guide/topics/ui/look-and-feel/autosizing-textView.html 不幸的是，他们不支持EditTexts，那么EditText还有其他的替代方案吗？
-
我试图创建一个包含两列的gridview。我的意思是每排并排两张照片，就像这张图片一样。 但我的照片之间有空间，因为它的大小不一样。这是我得到的。 正如您所看到的，第一张图片隐藏了显示联系人姓名和电话号码的图例。其他图片未正确拉伸。 这是我的GridView xml文件。如您所见,< code>columnWidth被设置为200dp。我希望它是自动的，所以图片会自动调整每个屏幕的大小。 这里是项
-
问题内容： 我需要将用户输入的文本显示为固定大小的div。我想要的是自动调整字体大小，以使文本尽可能多地填充框中。 所以-如果div为400px x 300px。如果有人输入ABC，那么它确实是大字体。如果他们输入一个段落，那么它将是很小的字体。 我可能想从最大字体大小开始-也许是32px，并且当文本太大而无法容纳容器时，请缩小字体大小直到适合为止。 问题答案： 和我的HTML是这样的 这是我的第
-
我似乎无法调整这个iframe的大小 为了简单起见，我没有包括几个包装div，因为它们只用于样式。然而，上面的两个外部div位于flexbox的div中，因此它们是水平显示的，而不是占据整个水平空间。我将内容div设置为100%的宽度，第一个div设置为固定宽度。如你所见，iframe也从硬编码的固定宽度/高度开始。还要注意，重置iframe的src在js函数中起作用，而不是宽度和高度。 谢谢你