Question

有很多“解决方案”可以在键入内容时扩展文本区域。

我需要在输入任何内容之前先设置其高度，以便通过加载页面可以看到整个内容。

为什么这个琐碎的任务如此复杂？

.txb{
display:block;
width:100%;
resize:none;
outline:none;
}

<textarea class='txb'>
lorem ipsum
dolor sit amet
consectetur adipiscing elit
sed do eiusmod tempor
incididunt ut labore
et dolore magna aliqua
</textarea>

Answer 1

您的要求不能仅使用CSS来完成，使用javascript非常简单。只需添加一个事件以侦听页面加载完成，然后根据其内容更新textarea高度。

希望我在代码段中的解释很清楚。

window.addEventListener('load', event => {
    // Select all `textarea` elements and loop through every element
    document.querySelectorAll('textarea').forEach(textarea => {
        // Update current textarea height based on it's content
        textarea.style.height = textarea.scrollHeight + 'px';

        // Listen to `input` event and update the textarea height
        textarea.addEventListener('input', event => {
            // First, remove current inline height
            event.target.style.removeProperty('height');

            // Then, update it with new content
            event.target.style.setProperty('height', event.target.scrollHeight + 'px');
        });
    });
}, {once: true});

.txb {
    display: block;
    width: 100%;
    resize: none;
    outline: none;
}

<textarea class="txb">
lorem ipsum
dolor sit amet
consectetur adipiscing elit
sed do eiusmod tempor
incididunt ut labore
et dolore magna aliqua
</textarea>

Answer 2

获取换行符的数量，并将每个换行符的高度设置为1em。

let ta = document.querySelector(".txb");

// Get the number of new line characters and set the height to 
// be 1em for each one.
ta.style.height = ta.value.split(/\n/).length + "em";

.txb{
display:block;
width:100%;
resize:none;
outline:none;
}

<textarea class='txb'>
lorem ipsum
dolor sit amet
consectetur adipiscing elit
sed do eiusmod tempor
incididunt ut labore
et dolore magna aliqua
</textarea>

键入任何内容之前要适合内容的textarea高度

2 个答案: