我想要什么?
我想要一个像 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/