HTML / [removed] Disable HTML CONTENT in contentEditable=true

前端未结

关注

 4  1316

你的背包

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 imag

相关标签:

4条回答

生来不讨喜

2021-01-03 11:43

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
迷失自我

2021-01-03 11:50

How about a textarea element?

You can style it to look how you like.

0 讨论(0)
发布评论:

提交评论
- 加载中...
说谎

2021-01-03 11:52

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

不知归路

2021-01-03 11:56

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

0 讨论(0)