我想要的是?
我想要一个像textarea一样工作的div,我不希望能够在div中编辑东西,并粘贴图像等等纯文本.
例
www.facebook.com
– 最好的例子是facebook的新闻源.
为什么我需要这种方式?
如果您查看Facebook的新闻源,您可以看到您可以撰写帖子的区域,在您撰写帖子或进行大量输入时进行扩展.
这就是为什么我想使用带有contentEditable的div的原因,因为在textarea中我不能这样做.
#
请不要只是JAVERY 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为“resizableTA”的textarea并将其附加到DOM树的document.body.
2)window.onload附加一个事件处理程序,taOnInput [输入上的textarea].
3)输入上的textarea创建一个虚拟跨度,将其宽度强制为textarea的宽度,并将字体样式强制为“Lucida Console”,其中AFAIK是textareas的默认字体,将textarea的值复制到span的innerHTML,同时替换
[textareas使用的换行符]和[换行符] …
4)span的offsetHeight是跨度的高度,现在可用于强制textarea的高度.
任何人都可以确认Lucida Console是textarea的默认字体吗?是Consola?快递新?我假设任何固定宽度的字体都可以.我不使用Mac,所以我不知道它与windows共享的字体,不过我认为Courier New是更好的选择……