javascript - HTML/JavaScript : Disable HTML CONTENT in contentEditable=true

标签 javascript html contenteditable richtextediting

我想要什么?


我想要一个像 textarea 一样工作的 div,我不想在 div 中编辑东西,粘贴图像等等只是纯文本。

示例


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

为什么我需要这种方式?


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

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

请不要只使用 JQUERY JAVASCRIPT

最佳答案

使用无框架的纯 JavaScript 可调整大小的文本区域:

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

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

关于javascript - HTML/JavaScript : Disable HTML CONTENT in contentEditable=true,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3341044/

相关文章:

javascript - 水平修复一些 HTML

javascript - 在普通js中获取最后一个类名

ios - 具有可编辑 UIWebView 的自定义键盘?

javascript - 关于 JavaScript 变量

javascript - 解析 XML 代码并创建长度标签表

html - 我的 iframe 视频在桌面上运行良好,但无法针对移动设备调整大小。我怎样才能解决这个问题?

html - Bootstrap 3 如何删除或移动小型设备(平板电脑、智能手机)下方的偏移量?

javascript - 在 contenteditable div 中用 span 包裹每个单词

php - 您将如何使用 PHP 表单将可内容编辑的 div 的内容保存在数据库中?

javascript - 如何使用 s3 api 和 node.js 将文件上传到 Wasabi 存储桶?