javascript - Contenteditable div 或 span 调整大小直到达到最大长度？

Question

是否有可能在具有最大长度的浏览器中有一个 contenteditable div - 并且它会自动调整大小直到达到最大长度？

基本上我想要一个可编辑的元素，它实际上只占用显示所需的空间，但具有最大长度属性。

EDITABLE_____________NORMAL WORD

我想确保 editalbe 调整大小并且只消耗所需的量。 原因是我想从中生成 PDF。所以多余的空间将以任何方式被 trim 。所以在浏览器中我们也应该看到相同的内容。解决起来太复杂了？

EDITABLE NORMAL WORD

我发现的一个相关问题。

Limiting Number of Characters in a ContentEditable div

Answer 1

要使 contentEditable 整齐地适合您，您只需将其设置为非 block 级元素或在 CSS 中将其设置为:

.textfield {display:inline;}

要限制可以输入的字符数量需要 JavaScript...

首先更新您的 contenteditable 元素以包含 max 属性:

<div contenteditable="true" name="choice1" class="textfield" max="15">EDITABLE</div>

然后使用 JS 来监听这些元素上的按键，并且只允许它们直到达到最大长度:

var textfields = document.getElementsByClassName("textfield"); 
for(i=0; i<textfields.length; i++){
    textfields[i].addEventListener("keypress", function(e) {
        if(this.innerHTML.length >= this.getAttribute("max")){
            e.preventDefault();
            return false;
        }
    }, false);
}

Here's the DEMO

更新:将其扩展为也包含 min 长度是相当简单的。 Here's an updated jsFiddle that does just that.