How to make contenteditable div accept only plaintext?

Question

I have a div as a textarea, because div can change it's height based on the text inside it, the problem here is if someone copied some styled text (text and html) and pasted it, the style sticks with the text, contenteditable='plaintext-only' would solve the problem but it seems to be a webkit-only feature.

So is there a way to allow text only inside a div?

For reference: https://jsfiddle.net/w25dnuen/

Use a textarea instead ... much simpler and it only accepts text — charlietfl, Jan 15 '16 at 16:47
Doubtful. Can try forcing styles: http://html5doctor.com/the-contenteditable-attribute/ I suspect your best bet is to actually use a `` and allow it to resize when more text is entered. — Twisty, Jan 15 '16 at 16:48
@Twisty How can I allow a textarea to resize when more text is entered ?? give me an example ! — zakaria, Jan 15 '16 at 17:01
@charlietfl textarea can't change it's height based on the text inside it !! — zakaria, Jan 15 '16 at 17:02
@zakaria sure it can..with a little help... search for `elastc textarea` — charlietfl, Jan 15 '16 at 17:02
I believe my solution in a similar post will solve your issues: https://stackoverflow.com/a/64001839/10505518 — Manstie, Sep 22 '20 at 01:36

score 2 · Answer 1 · answered Jan 15 '16 at 17:15

Here's an example of a text area that will grow based on the contents you enter:

http://jsfiddle.net/janjarfalk/r3Ekw/

The reason that the elastic text area works is the external jquery.elastic.source.js which is located here: http://jquery-elastic.googlecode.com/svn/trunk/jquery.elastic.source.js

so now that you have looked at those two resources, let's talk about what it does. The script has an "udpate" function that basically just adds whitespace when it gets to the end of the row here:

// Add an extra white space so new rows are added when you are at the end of a row.
$twin.html(textareaContent+'&nbsp;');

And then here you can see the respective functions:

// Updates the width of the twin. (solution for textareas with widths in percent)
            function setTwinWidth(){
                var curatedWidth = Math.floor(parseInt($textarea.width(),10));
                if($twin.width() !== curatedWidth){
                    $twin.css({'width': curatedWidth + 'px'});

                    // Update height of textarea
                    update(true);
                }
            }

            // Sets a given height and overflow state on the textarea
            function setHeightAndOverflow(height, overflow){

                var curratedHeight = Math.floor(parseInt(height,10));
                if($textarea.height() !== curratedHeight){
                    $textarea.css({'height': curratedHeight + 'px','overflow':overflow});
                }
            }

This is all in the elastic function. Hopefully this gives a little insight and helps you out.

How to make contenteditable div accept only plaintext?

1 Answers1