3

我想要的是？

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

例子

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

为什么我需要这种方式？

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

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

请不要 JQUERY 只有 JAVASCRIPT

4

4 回答 4

3

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

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

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

于 2010-07-27T08:16:09.167 回答
0

textarea元素怎么样？

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

于 2010-07-27T05:59:08.513 回答
0

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

于 2010-07-27T06:10:23.017 回答
0

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

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

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

于 2010-07-27T06:28:07.970 回答