javascript - Contenteditable div or span that resizes until it hits max length? - Stack Overflow

admin管理员组

文章数量:1291314

Is it possible to have a contenteditable div in the browser that has maxlength - and it auto resizes until it hits the max length ?

Basically I want to have a editable elements that actually only consumes as much space as it is required to get displayed yet having the max length property .

EDITABLE_____________NORMAL WORD

I would like to make sure editalbe resize and only consumes as much as required . Reason is that I want to generate PDF out of this . So the extra spaces will be trimmed any way . So in browser too we should see the same. It is too plex to solve ?

EDITABLE NORMAL WORD

A related question I found .

Limiting Number of Characters in a ContentEditable div

Is it possible to have a contenteditable div in the browser that has maxlength - and it auto resizes until it hits the max length ?

Basically I want to have a editable elements that actually only consumes as much space as it is required to get displayed yet having the max length property .

EDITABLE_____________NORMAL WORD

I would like to make sure editalbe resize and only consumes as much as required . Reason is that I want to generate PDF out of this . So the extra spaces will be trimmed any way . So in browser too we should see the same. It is too plex to solve ?

EDITABLE NORMAL WORD

A related question I found .

Limiting Number of Characters in a ContentEditable div

• javascript
• html
• css

Share Improve this question Follow edited May 23, 2017 at 11:44 CommunityBot 111 silver badge asked Mar 2, 2014 at 21:05 NishantNishant 21.9k2020 gold badges7878 silver badges106106 bronze badges 2

• 1 Your div must have css height or max-height set with an overflow:scroll or similar set because a div will automatically grow in height from the content without these set. – Rob Sedgwick Commented Mar 2, 2014 at 21:08
• 1 if you are referring to 'width' add css 'inline-block' to the div, to auto grow in width until it hits it's max-width css – Rob Sedgwick Commented Mar 2, 2014 at 21:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

To make the contentEditable fit neatly you simply need it to be an non-block-level element or set it to be such in CSS:

.textfield {display:inline;}

To limit the amount of characters that can be entered requires JavaScript...

First update your contenteditable element/s to include a max attribute:

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

Then use JS to listen for key-presses on these elements and only allow them until the max-length has been reached:

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: It's fairly trivial to extend this to include a min length too. Here's an updated jsFiddle that does just that.

http://jsfiddle/KmFL6/ seems to work .

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

Span being the key idea there . Span just spans across the area needed !

http://codepen.io/flesler/pen/AEIFc also is cool . CSS Property will give you a placeholder too .

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

you can set the css to have max-width and min-width like so:

<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>

then in html as others are saying

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

1. Create contenteditable mon css sizing (flex, etc)
2. Set contenteditable css: word-break: break-all OR break-word

本文标签： javascriptContenteditable div or span that resizes until it hits max lengthStack Overflow