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

发布于 2024-09-11 12:16:28 字数 557 浏览 9 评论 0原文

我想要什么？

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

示例

www.facebook.com - 最好的示例是facebook 的新闻 feed。

为什么我需要这种方式？

如果您查看 Facebook 的新闻源，您会发现您可以撰写帖子的区域会在您撰写帖子或点击某个按钮时展开很多进入。

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

请不要使用 JQUERY，仅使用 JAVASCRIPT

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南笙 2024-09-18 12:16:28

使用没有框架的纯 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为“ressizedTA”的textarea已经被创建并附加到DOM树的document.body中。
2) window.onload 附加一个事件处理程序，taOnInput [输入上的文本区域]。
3）输入上的textarea创建一个虚拟span，强制其宽度为textarea的宽度，字体样式为“Lucida Console”，据我所知是textarea的默认字体，将textarea的值复制到span的innerHTML，同时替换%0A [文本区域使用的换行符] 与
[换行符]...
4）span的offsetHeight是span的高度，现在可以用它来强制textarea的高度。

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

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 原文