我想要的是？
我想要一个像 a 一样工作的 divtextarea，我不希望能够在 div 中编辑内容，并粘贴图像等纯文本。
Example
www.facebook.com- 最好的example is 脸书的新闻 feed.
为什么我需要这种方式？
如果你查看 Facebook 的新闻源，你会看到可以写帖子的区域，expands当您撰写帖子或点击大量输入时。
这与我想使用带有 contentEditable 的 div 的原因相同，因为在 textarea 中我不能这样做。
#
请不要使用 JQUERY，仅使用 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为“ressizedTA”的textarea已经被创建并附加到DOM树的document.body中。
2) window.onload 附加一个事件处理程序 taOnInput [textarea on input]。
3）输入上的textarea创建一个虚拟span，强制其宽度为textarea的宽度，字体样式为“Lucida Console”，据我所知是textarea的默认字体，将textarea的值复制到span的innerHTML，同时替换%0A [文本区域使用的换行符] 与
[越线]...
4）span的offsetHeight是span的高度，现在可以用它来强制textarea的高度。
谁能确认 Lucida Console 是 textarea 的默认字体吗？是康索拉吗？快递新？我认为任何固定宽度的字体都可以。我不使用Mac，所以我不知道它与Windows共享什么字体，尽管我认为Courier New是更好的选择......
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
