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

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

题

我想要的是？

我想要一个像 textarea 一样工作的 div，我不希望能够编辑 div 中的内容，以及粘贴图像等纯文本。

例子

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

为什么我需要这种方式？

如果您查看 facebook 的新闻提要，您会发现可以撰写帖子的区域会随着您撰写帖子或点击大量输入而扩大。

这与我想使用带有 contentEditable 的 div 的原因相同，因为在 textarea 中我不能这样做。 #

请不要 JQUERY 只有 JAVASCRIPT

有帮助吗？

解决方案

使用没有框架的纯 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>

非常hackish，不到10分钟就完成了。希望它至少能给你一个想法。

仅在 Google Chrome 5.0.308.0 上测试

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

谁能确认 Lucida Console 是 textarea 的默认字体？是康索拉吗？新快递？我假设任何固定宽度的字体都可以工作。我不使用 Mac，所以我不知道它与 windows 共享什么字体，虽然我认为 Courier New 是一个更好的选择......

其他提示

textarea元素怎么样？

您可以根据自己的喜好设置样式。

如果你只想要扩展，你可以 试试这个。

您不必使用 DIV。您仍然可以拥有一个 textarea 并在必要时对其进行扩展。

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top