logo标签列表

从文件读取文本时强制调整大小

javascriptcssdebuggingautoresize
7

这个建议的重复问题是我提出这个问题的基础，所以它不是一个重复问题！实际上，我从一开始就已经链接到了那个问题...

良好编辑：

我制作了一个JSFiddle（我的第一次 :)）。请注意，文本区域不会像人们希望的那样扩展。在文本区域中键入任何内容，它将立即被调整大小。

如果我们可以自动发送按键事件，它可能会起作用...（this相关问题没有帮助，答案没有效果）。

我正在使用从此处获取的textarea。然后，我从文件中读取内容并将其放入文本框中，但它没有按预期调整大小。
我像这样更新文本框：
function updateTextbox(text) {
  $('#cagetextbox').val(text);
};

有什么想法吗？

我使用的是Ubuntu 12.04上的Firefox 34.0 canonical，如果这对问题有所影响，我希望不要这样，因为我的一些用户使用Chrome。

编辑：

一种尝试的方法是编写类似于以下内容的代码：

$('#cagetextbox').attr("rows", how many rows does the new text contain);

请注意，如果我们尝试查找textarea中包含的文本行数，我们将得到1作为答案。

也许可以使用width/(length_of_line * font_size)这样的公式。经过一些测试，如果我减去1（当然只保留结果的整数部分），似乎是正确的。

通常最好使用 width: 100%;，让文本根据需要填充和滚动，而不是冒险在视口中出现过大的框。 - dandavis
很难确定字体将使用的像素大小（取决于缩放、用户首选项、操作系统、操作系统文本大小等），这意味着 cols=n 是唯一可靠的调整大小的方法。因此，您需要找到最长行的宽度，并将 cols 属性设置为该值。cagetextbox.cols=Math.max.apply(null, text.split("\n").map(function(a){return a.length;})); - dandavis
1
我在一个项目中遇到了同样关于操作系统、字体、缩放等方面的问题。我创建了一个 div 元素，将其与用户使用的元素具有相同的 CSS 规则，并将其放置在 dom 中不可见的位置。我添加了文本内容，测量了它的高度和宽度，并将这些属性应用到用户使用的另一个元素上，然后销毁了临时的 div 元素。在那种情况下，这是为编辑器应用程序的所见即所得功能而设计的，但原理是相同的。 - Radio
你可以使用画布2D上下文来测量文本的宽度。 - Evan Knowles
@G.Samaras 请看下面我的回答。 - Radio
显示剩余5条评论
3个回答
6

即使您在“input.textarea”上触发它，您的textArea没有自行更新高度，因为这个值是未定义的：

this.baseScrollHeight
我从 this.rows = minRows + rows; 中减去了1，看起来非常好！Cage球员也想感谢您（我们在那里打球，搜索谷歌Cage Samaras以获取更多信息）。 - gsamaras
请注意，当我在“html”部分用两个1替换两个3时，它的工作效果非常好。 - gsamaras
1
您可以使用以下代码来调整元素的高度，例如文本区域。虽然它使用了循环，但这样可以避免多种显示和滚动问题。
function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight'));
}

在任何您喜欢的事件上重新调整大小。

$("#cagetextbox").on("keyup change", function (e) {
    autoheight(this);
});

当事件没有自动触发时，您可以手动调用它。

function updateTextbox(text) {
    $('#cagetextbox').val(text);
    autoheight($("#cagetextbox"));
};

小提琴

The Cage球员非常感谢您（我们在那里踢球，搜索谷歌Cage Samaras以获取更多信息）。 - gsamaras
然而，这破坏了之前发生的良好调整大小。尽管如此，做得很好！ - gsamaras
对不起，哪个调整大小被破坏了？此外，请尝试在fiddle的文本区域中输入文本的中间或开头，以回答此问题，并在另一个答案中进行尝试。至少在Chrome浏览器中，光标位置在另一个fiddle中不会被保留。 - Thaylon
1
我创建了一个工作的 fiddle。它创建了一个输入文本框，就像它在不可编辑的 div 中显示一样。

https://jsfiddle.net/khgk7nt5/2/

示例 CSS

.test{
    font-family:"Times New Roman", Times, serif;
    font-color:#CCCCCC;
    font-size:20px;
    width:300px;
}
.testLoc{
    position:absolute;
    top:-1000px;
}

JavaScript

var testText = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore"

var test = $("<div/>");
test.addClass("test testLoc");
test.text(testText);
$("body").append(test);

var out = $("<textarea/>");
out.addClass("test");
out.width(test.width());
out.height(test.height());
out.val(testText);
$("body").append(out);
test.remove();
当然，抱歉我不能更快地创建一个fiddle，我正在处理自己的事情。祝你的项目好运。 :) - Radio
没问题，你得到了我的 +1！ - gsamaras
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接