Question

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

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

EDITABLE_____________NORMAL WORD

我想确保editalbe调整大小并且只消耗所需的费用。原因是我想从中生成PDF。所以额外的空间将以任何方式修剪。所以在浏览器中也应该看到相同的内容。它太复杂了无法解决？

EDITABLE NORMAL WORD

我发现的一个相关问题。

Limiting Number of Characters in a ContentEditable div

Answer 1

http://jsfiddle.net/KmFL6/似乎有效。

<strong>
    <p>Hello
<span class="editable" contenteditable=true placeholder="Element">   </span>World
    </p>
</strong>

跨度是那里的关键想法。跨越该区域只需跨越！

http://codepen.io/flesler/pen/AEIFc也很酷。 CSS Property也会给你一个占位符。

[contenteditable=true]:empty:before {
  content: attr(placeholder);
}

Answer 2

您可以将css设置为max-width和min-width，如下所示：

<style>
    .some-selector{
       max-width: 20em; /* or whatever you want */
       min-width: 0px;  /* this is only if it is empty */
       width:auto; 
       word-wrap: break-word /* useful if you have really long words that would overflow otherwise*/
    }
</style>

然后在html中，其他人正在说

<span contenteditable='true' class="some-selector"></span>

Answer 3

为了使contentEditable适合整齐，你只需将它作为非块级元素或在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.

Answer 4

创建内容可编辑的通用CSS大小（flex等）
设置内容可编辑的CSS：word-break: break-all或break-word

可知的div或span调整大小直到达到最大长度？

4 个答案: