Question

我正在尝试让内容可编辑的文本框（div元素）根据需要增长以适应输入的文本，最多可达父div的宽度的80％。

有没有办法用CSS做到这一点？如果没有，我对Javascript解决方案持开放态度，但我使用的是React，这使得这方面的事情变得复杂

这不是我所知道的任何其他问题的重复，因为它需要一个解决方案：

独立于视口大小
支持带有max-width
适用于contentEditable
在文本内容更改时工作

Answer 1

可能你可以在父div中有一个div，它是父div的80％。然后为文本框设置width：auto。可能听起来有点棘手。

Answer 2

嗯......试试这个：

display: inline-block;

我不确定。如果有效，请告诉我。

Answer 3

我试图让文本框根据需要增长以适合键入的文本进入它，高达父div的宽度的80％。

我非常确定单凭CSS无法实现这一点，因为CSS无法确定textarea文本内容的长度。

使用javascript，在每个按键上，您可以检查文本内容的长度以及是否：

文本内容超过一定数量的按键;和
textarea的宽度仍然比允许的最大宽度

然后textarea可以逐步扩展。

工作示例：

＆＃13;

var myTextArea = document.getElementsByTagName('textarea')[0];
var myTextLength = myTextArea.value.length
var myTextWidth = parseInt(window.getComputedStyle(myTextArea).width);
var myTextMinLength = 20;
var myTextMaxWidth = ((parseInt(window.getComputedStyle(document.body).width) / 100) * 80);

function checkTextLength() {
    myTextLength = myTextArea.value.length;
    
    if ((myTextLength > myTextMinLength) && (myTextWidth < (myTextMaxWidth))) {
            myTextWidth += 8;
        }
    
    myTextArea.style.width = myTextWidth + 'px';
}

myTextArea.addEventListener('keypress', checkTextLength, false);

＆＃13;

textarea {
width: 180px;
height: 40px;
}

＆＃13;

<form>
<textarea placeholder="Start typing..."></textarea>
</form>

＆＃13;

展开一个文本框以增长以适应CSS的内容？

3 个答案: