Contenteditable div or span that resizes until it hits max length?

Question

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 complex to solve ?

EDITABLE NORMAL WORD

A related question I found .

Limiting Number of Characters in a ContentEditable div

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, Mar 02 '14 at 21:08
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, Mar 02 '14 at 21:11

Nishant · Answer 1 · 2014-03-02T21:49:30.180

http://jsfiddle.net/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);
}

Mobius · Answer 2 · 2015-07-21T23:23:40.763

2

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>

edited Jul 21 '15 at 23:23

answered Mar 02 '14 at 21:38

Mobius

2,871
1
19
29

missing the . on the style selector name – Gonçalo Vieira Jul 16 '15 at 12:50

Moob · Accepted Answer · 2014-03-02T22:50:28.320

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.

score 1 · Answer 4 · answered Aug 15 '19 at 08:12

1

Create contenteditable common css sizing (flex, etc)
Set contenteditable css: word-break: break-all OR break-word

answered Aug 15 '19 at 08:12

alex_1948511

6,073
2
20
21

Contenteditable div or span that resizes until it hits max length?

4 Answers4