HTML / JAVASCRIPT : Disable HTML CONTENT in contentEditable=true

StackOverflow https://stackoverflow.com/questions/3341044

Question

What I want?

I want a div what works like a textarea, I don't want to have the ability to edit things in the div, and paste images and so on just plain text.

Example

www.facebook.com - The best example is facebook's news feed.

Why I need this way?

If you check out facebook's news feed, you well see that the area where you can write your post, expands as you write your post or hit a lots of enters.

This is the same reason why I want to use a div with contentEditable, because in textarea I can't do that. #

PLEASE NO JQUERY only JAVASCRIPT

Was it helpful?

Solution

Resizable Textarea using pure JavaScript without frameworks:

<html>
    <head>
        <script>
            function taOnInput()
            {
                var dis = this;
                setTimeout(
                    function(){
                        var span = document.createElement("div");
                        span.innerHTML = escape(dis.value).replace(/[%]0A/g, "<br/>")+"<br/>."; //Extra BR for padding... TextArea uses %0A, not \n
                        span.style.width = dis.offsetWidth+"px";
                        span.style.padding = "0px";
                        span.style.fontFamily = "Lucida Console";
                        document.body.appendChild(span); //Offset height doesnt work when not in DOM tree i guess =/? or is it a hack
                        dis.style.height = span.offsetHeight+"px";
                        document.body.removeChild(span);
                    }, 1
                ); //setTimeout=hack, since oKP is called BEFORE character append.  
            }
            window.onload = function()
            {
                var resizableTA = document.getElementById("resizableTA");
                resizableTA.onkeypress = taOnInput;
            }
        </script>
        <title>ItzWarty - Untitled Document</title>
    </head>
    <body>
        <textarea id="resizableTA">Trololololol</textarea>
    </body>
</html>

Very hackish, put it together in less than 10 minutes. Hopefully it'll at least give you an idea.

ONLY tested on Google Chrome 5.0.308.0

Explanation of code, since i fail at commenting
1) before window.onload, the textarea of id "resizableTA" has been created and appended to document.body of DOM tree.
2) window.onload attaches an event handler, taOnInput [textarea on input].
3) textarea on input creates a dummy span, forces its width to the width of the textarea and font style to "Lucida Console", which AFAIK is the default font for textareas, copies the value of the textarea to the span's innerHTML, while replacing %0A [newline that textareas use] with
[line break]...
4) span's offsetHeight is the height of the span, which can now be used to force the height of the textarea.

Can anyone confirm that Lucida Console is the default font of textarea? Is it Consola? Courier New? I assumed any fixed-width font would work. I don't use Mac, so I dont know what fonts it shared with windows, though i think Courier New is a better choice...

OTHER TIPS

How about a textarea element?

You can style it to look how you like.

if you want just the expanding, you can try this.

You don't have to use a DIV. You can still have a textarea and expand it when necessary.

Here is a jQuery plugin that does just that: http://plugins.jquery.com/project/TextAreaResizer

Here is a demo: http://www.itsavesyou.com/TextArea_Resizer_example.htm

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top