是否使用CSS扩展文本框以适应其内容?

zfciruhq  于 2023-02-10  发布在  其他
关注(0)|答案(3)|浏览(117)

我正在尝试让一个内容可编辑的文本框(div元素)根据需要增长,以适应输入的文本,最大可达父div宽度的80%。
有没有办法只用CSS来实现这个目标?如果没有,我愿意使用Javascript解决方案,但我使用的是React,这会使事情变得复杂

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

1.与视口大小无关
1.支持具有max-width的父div
1.适用于内容可编辑
1.文本内容更改时有效

nmpmafwu

nmpmafwu1#

您可能会在父div中有一个div,它是父div的80%,然后设置宽度:文本框自动。听起来可能有点棘手。

gr8qqesn

gr8qqesn2#

我尝试让一个文本框根据需要增长,以适应输入的文本,最大可以达到父div宽度的80%。
我相当肯定这不可能只通过CSS实现,因为CSS无法确定textarea的文本内容的长度。
使用javascript,在每次按键时,您可以检查文本内容的长度,如果:

  • 文本内容超过一定的按键次数;以及
  • textarea的宽度仍然比最大允许宽度窄

textarea可以递增地扩展。

    • 工作示例:**
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);
textarea {
width: 180px;
height: 40px;
}
<form>
<textarea placeholder="Start typing..."></textarea>
</form>
eqfvzcg8

eqfvzcg83#

嗯...试试这个:

display: inline-block;

我不太确定。如果能用就告诉我。

相关问题