HTML / JAVASCRIPT：在contentEditable = true中禁用HTML内容

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. 我想要一个像textarea一样工作的div，我不想在div中编辑内容，粘贴图像等仅是纯文本的功能。

Example 例

www.facebook.com - The best example is facebook's news feed. www.facebook.com-最好的例子是facebook的新闻提要。

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. 如果您查看facebook的新闻提要，您会很好地看到可以撰写文章的区域，随着您撰写文章或点击大量条目而扩大的区域。

This is the same reason why I want to use a div with contentEditable, because in textarea I can't do that. 这就是为什么我要对contentEditable使用div的相同原因，因为在textarea中，我不能这样做。 # ＃

PLEASE NO JQUERY only JAVASCRIPT 请不要仅JQUERY JAVASCRIPT

Answer 1

Resizable Textarea using pure JavaScript without frameworks: 使用不带框架的纯JavaScript来调整Textarea的大小：

<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. 非常骇人听闻，不到10分钟即可放在一起。 Hopefully it'll at least give you an idea. 希望它至少能给您一个想法。

ONLY tested on Google Chrome 5.0.308.0 仅在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. 1）在window.onload之前，已创建ID为“ resizableTA”的文本区域，并将其附加到DOM树的document.body中。
2) window.onload attaches an event handler, taOnInput [textarea on input]. 2）window.onload附加了一个事件处理程序taOnInput [input上的textarea]。
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 3）输入的textarea创建一个虚拟跨度，强制其宽度为textarea的宽度，并将字体样式强制为“ Lucida Console”，其中AFAIK是textareas的默认字体，将textarea的值复制到该跨度的innerHTML中，同时进行替换％0A [textareas使用的换行符]与
[line break]... [越线]...
4) span's offsetHeight is the height of the span, which can now be used to force the height of the textarea. 4）span的offsetHeight是span的高度，现在可以用来强制textarea的高度。

Can anyone confirm that Lucida Console is the default font of textarea? 任何人都可以确认Lucida Console是textarea的默认字体吗？ Is it Consola? 是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... 我不使用Mac，所以我不知道它与Windows共享什么字体，尽管我认为Courier New是更好的选择...

Answer 2

How about a textarea element? 文本元素呢？

You can style it to look how you like. 您可以将其样式设置为自己喜欢的样式。

Answer 3

如果您只想扩展，可以尝试一下。

Answer 4

You don't have to use a DIV. 您不必使用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 这是一个能做到这一点的jQuery插件： http : //plugins.jquery.com/project/TextAreaResizer

Here is a demo: http://www.itsavesyou.com/TextArea_Resizer_example.htm 这是一个演示： http : //www.itsavesyou.com/TextArea_Resizer_example.htm

HTML / JAVASCRIPT：在contentEditable = true中禁用HTML内容

问题描述

4 个解决方案

解决方案1
3 已采纳 2010-07-27 08:16:09

解决方案2
0 2010-07-27 05:59:08

解决方案3
0 2010-07-27 06:10:23

解决方案4
0 2010-07-27 06:28:07

HTML / JAVASCRIPT：在contentEditable = true中禁用HTML内容

问题描述

4 个解决方案

解决方案1 3 已采纳 2010-07-27 08:16:09

解决方案2 0 2010-07-27 05:59:08

解决方案3 0 2010-07-27 06:10:23

解决方案4 0 2010-07-27 06:28:07

解决方案1
3 已采纳 2010-07-27 08:16:09

解决方案2
0 2010-07-27 05:59:08

解决方案3
0 2010-07-27 06:10:23

解决方案4
0 2010-07-27 06:28:07