我想要的是？
我想要一个像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是更好的选择……
