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

Question

我想要的是？

我想要一个像textarea一样工作的div，我不想在div中编辑内容，粘贴图像等仅是纯文本的功能。

例

www.facebook.com-最好的例子是facebook的新闻提要。

为什么我需要这种方式？

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

这就是为什么我要对contentEditable使用div的相同原因，因为在textarea中，我不能这样做。 ＃

请不要仅JQUERY JAVASCRIPT

Answer 1

使用不带框架的纯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>

非常骇人听闻，不到10分钟即可放在一起。 希望它至少能给您一个想法。

仅在Google Chrome 5.0.308.0上进行过测试

代码说明，因为我无法评论
1）在window.onload之前，已创建ID为“ resizableTA”的文本区域，并将其附加到DOM树的document.body中。
2）window.onload附加了一个事件处理程序taOnInput [input上的textarea]。
3）输入的textarea创建一个虚拟跨度，强制其宽度为textarea的宽度，并将字体样式强制为“ Lucida Console”，其中AFAIK是textareas的默认字体，将textarea的值复制到该跨度的innerHTML中，同时进行替换％0A [textareas使用的换行符]与
[越线]...
4）span的offsetHeight是span的高度，现在可以用来强制textarea的高度。

任何人都可以确认Lucida Console是textarea的默认字体吗？ 是Consola吗？ 快递新？ 我以为任何固定宽度的字体都可以。 我不使用Mac，所以我不知道它与Windows共享什么字体，尽管我认为Courier New是更好的选择...

Answer 2

文本元素呢？

您可以将其样式设置为自己喜欢的样式。

Answer 3

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

Answer 4

您不必使用DIV。 您仍然可以拥有文本区域，并在必要时进行扩展。

这是一个能做到这一点的jQuery插件： http : //plugins.jquery.com/project/TextAreaResizer

这是一个演示： 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