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

建议的副本是我从哪里得到这个问题的基础的问题，所以它不是副本！事实上，我已经从一开始就把这个问题联系起来了

---

好的编辑：

我犯了一个错误（我的第一次：）。请注意textarea并没有像人们希望的那样扩展。在文本区域内键入一些内容，它将立即调整大小

如果我们可以自动发送按键事件，它可能会工作。。。（相关问题无济于事，答案无效）

---

我使用的是

textarea

，与原来一样。然后，我从一个文件中读取内容，并将其放入文本框中，但它的大小没有得到应有的调整

我会像这样更新文本框：

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

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

$('#cagetextbox').val(text).trigger('input.textarea');

有什么想法吗

我使用的是Firefox34.0Canonical，Ubuntu 12.04，如果这起到了一定作用的话，我希望不是这样，因为我的一些用户使用Chrome

---

编辑：

尝试写下如下内容：

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

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

$('#cagetextbox').val(text).trigger('input.textarea');

注意，如果我们尝试包含，我们将得到1作为答案

---

编辑2

---

可能类似于

宽度/（行长*字体大小）

。对于一些测试来说，如果我减去1（当然只保留结果的整数部分），这似乎是正确的。

您的textArea即使在触发其上的“input.textArea”时也不会更新高度本身，因为该值未定义：

this.baseScrollHeight

它仅在文本区域上的“焦点”后定义

我对您的代码做了一些修改：

那么，关于“输入”

    $(document).on('input.textarea', '.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0,
            rows;
        this.rows = minRows;
        this.baseScrollHeight = this.baseScrollHeight | calcBaseScrollHeight(this);
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

并将BaseCollHeight计算移动到单独的函数

function calcBaseScrollHeight(textArea) {
    var savedValue = textArea.value,
        baseScrollHeight;
    textArea.value = '';
    baseScrollHeight = textArea.scrollHeight;
    textArea.value = savedValue;
    return baseScrollHeight;
}

然后按如下方式调用updateTextBox：

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

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

$('#cagetextbox').val(text).trigger('input.textarea');

---

您可以使用下面的代码来调整元素的高度，在您的示例中是textarea。虽然它确实使用了循环，但这样可以避免一些显示和滚动问题

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"));
};

---

我制作了一把小提琴。它创建一个输入文本字段，就像它显示在不可编辑的div中一样

示例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();

var testText=“对于所有的错误，我们都要清楚地认识到这一点，这是因为我们需要赞美、尊重他人、尊重发明者的真实性和准建筑师的生命。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。如果你是我的朋友，你就可以在我的身边，在我的身边，在我的劳动时间里
var测试=$（“”）；
test.addClass（“test testLoc”）；
test.text（testText）；
$（“正文”）。附加（测试）；
var out=$（“”）；
out.addClass（“测试”）；
out.width（test.width（））；
out.height（test.height（））；
out.val（testText）；
$（“正文”）。追加（输出）；
测试。移除（）；

通常情况下，最好使用宽度为100%的

使其尽可能大；

，并让文本根据需要填充和滚动，而不是冒着视口中框过大的风险。出于各种原因@dandavis，我希望保持其大小可调，但感谢您的评论。嗯，很难说字体将使用的像素大小（根据缩放、用户prefs、OS、OS文本大小等进行调整），这意味着

cols=n

是唯一可靠的调整大小的方法。因此，您需要找到最长行的宽度，并将

cols

attrib设置为该值。

cagetextbox.cols=Math.max.apply（null，text.split（“\n”）.map（函数（a）{return a.length；}）

@dandavis您发布的内容即使与我最近的尝试也不起作用，但我们已经很接近了。请看我的编辑！我在一个项目中遇到了这个问题，对操作系统、字体、缩放等有着同样的担忧。我使用与用户使用的元素相同的CSS规则在dom上创建了一个视图外的div。我添加了文本，测量了它，并将其高度和宽度应用到了它用户使用的另一个元素，然后销毁了临时div。在这种情况下，它是用于编辑器应用程序的WYSIWG，但原理是相同的。Cage玩家非常感谢您（我们在那里玩，google Cage samaras了解更多）但是，这就破坏了前面讨论过的漂亮的调整大小。但是，很好的努力！对不起，哪一个调整的大小被破坏了？同样，试着在中间的一个或文本的开头输入文本到这个答案，在一个到另一个答案中，至少在Chrome中，光标的位置不在另一个小提琴前面。从

this.rows=minRows+rows；

下载1，看起来很不错！Cage玩家也要感谢你（我们在那里玩，谷歌Cage samaras了解更多）请注意，当我在

html

部分中用两个1替换两个3时，它起了很大的作用。当然，很抱歉，我不能更快地处理我自己的东西。祝你的项目好运。：）没问题，你得到了我的+1！