HTML / [removed] Disable HTML CONTENT in contentEd

2020-02-29 10:55发布

站内问答 / JavaScript
1246 4 6

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

4条回答
Emotional °昔
2楼-- · 2020-02-29 11:16

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

查看更多
0人赞 添加讨论(0) 举报
聊天终结者
3楼-- · 2020-02-29 11:18

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) 举报
放我归山
4楼-- · 2020-02-29 11:21

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) 举报
做个烂人
5楼-- · 2020-02-29 11:26

How about a textarea element?

You can style it to look how you like.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)