Question

我想要什么？

我想要一个像textarea那样有效的div，我不希望能够在div中编辑东西，并且只是粘贴图像等纯文本。

示例

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

为什么我需要这种方式？

如果您查看了Facebook的新闻Feed，那么您可以在撰写帖子或点击大量内容时看到您可以撰写帖子的区域展开。

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

请不要只有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>

非常hackish，在不到10分钟内把它放在一起。希望它至少能给你一个想法。

仅在Google Chrome 5.0.308.0上测试

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

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

Answer 2

textarea 元素怎么样？

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

Answer 3

如果您只想扩展，可以try this。

Answer 4

您不必使用DIV。您仍然可以使用textarea并在必要时进行扩展。

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

以下是演示：http://www.itsavesyou.com/TextArea_Resizer_example.htm

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

4 个答案: