Contenteditable div或span，調整大小直至達到最大長度？

是否有可能在瀏覽器有一個contenteditable div具有maxlength - 它會自動調整大小，直到它達到最大長度？Contenteditable div或span，調整大小直至達到最大長度？

基本上我想要一個可編輯的元素，實際上只消耗盡可能多的空間，因爲它需要顯示但具有最大長度屬性。

EDITABLE_____________NORMAL WORD

我想確保editalbe調整大小，只消耗盡可能多的所需。原因是我想從中生成PDF。所以額外的空間將以任何方式修剪。所以在瀏覽器中我們也應該看到一樣的。解決起來太複雜了？

EDITABLE NORMAL WORD

來源

2014-03-02 Nishant

你'div'必須有CSS'height'或'MAX-height'與'溢出設置：scroll'或類似的設置，因爲一個div會自動在高度成長，從沒有這些集的內容。 –

如果你指的是'寬度'添加css'inline-block'到div，自動增長的寬度，直到它達到了'最大寬度'css –

爲了使contentEditable完全吻合，你只需要它是一個非塊級元素，或者將其設置爲CSS：

.textfield {display:inline;}

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

首先更新您的CONTENTEDITABLE元/ s到包括max屬性：

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

然後用JS來監聽鍵-presses這些元素，只允許他們，直到最大長度已達到：

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

UPDATE：這是相當微不足道的擴展，以包括min長了。 Here's an updated jsFiddle that does just that.

來源

2014-03-02 21:51:37 Moob

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); 
}

來源

2014-03-02 21:22:00 Nishant

您可以設置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>

來源

2014-03-02 21:38:51 Mobius

丟失。在樣式選擇器名稱上 –

Contenteditable div或span，調整大小直至達到最大長度？

回答

相關問題