时间戳

首页 > 解决方案 > 如何使文本区域变得更高更宽以适应新文本

javascript - 如何使文本区域变得更高更宽以适应新文本

问题描述

我有一个用于代码编辑器的文本区域，因此有意将其设置为不换行。现在，当用户输入的文本超出 textarea 的范围时，textarea 将获得一个滚动条。我不想要这种行为。相反，我希望 textarea 在x和y 方向上都增长以适应新文本。我目前正在使用以下代码：

function textarea_height(textarea, MaxHeight) {
    let textareaRows = textarea.value.split("\n");
    if (textareaRows[0] != "undefined" && textareaRows.length < MaxHeight) counter = textareaRows.length;
    else if (textareaRows.length >= MaxHeight) counter = MaxHeight;
    else counter = 1;
    textarea.rows = counter;
    let longest = textareaRows.reduce((acc, val) => val.length > acc.length ? val : acc);
    textarea.cols = longest.length;
}

我已将其应用于input, change,keydown和keyuplisteners。这段代码非常适合高度，但宽度有点奇怪。对于溢出的前几列，但文本区域仍然得到一个滚动条。提前感谢您的帮助！

标签： javascripthtmlcssinputtextarea

解决方案

推荐阅读