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

前端之家收集整理的这篇文章主要介绍了HTML/JAVASCRIPT:在contentEditable = true中禁用HTML内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要的是?

我想要一个像textarea一样工作的div,我不希望能够在div中编辑东西,并粘贴图像等等纯文本.

www.facebook.com
– 最好的例子是facebook的新闻源.

为什么我需要这种方式?

如果您查看Facebook的新闻源,您可以看到您可以撰写帖子的区域,在您撰写帖子或进行大量输入时进行扩展.

这就是为什么我想使用带有contentEditable的div的原因,因为在textarea中我不能这样做.
#

请不要只是JAVERY 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].
3)输入上的textarea创建一个虚拟跨度,将其宽度强制为textarea的宽度,并将字体样式强制为“Lucida Console”,其中AFAIK是textareas的默认字体,将textarea的值复制到span的innerHTML,同时替换
[textareas使用的换行符]和[换行符] …
4)span的offsetHeight是跨度的高度,现在可用于强制textarea的高度.

任何人都可以确认Lucida Console是textarea的默认字体吗?是Consola?快递新?我假设任何固定宽度的字体都可以.我不使用Mac,所以我不知道它与windows共享的字体,不过我认为Courier New是更好的选择……

原文链接:https://www.f2er.com/html/232239.html

猜你在找的HTML相关文章