HTML / JAVASCRIPT : Disable HTML CONTENT in contentEditable=true -
what want?
i want div works textarea
, don't want have ability edit things in div, , paste images , on plain text.
example
www.facebook.com - best example facebook's news feed.
why need way?
if check out facebook's news feed, see area can write post, expands write post or hit lots of enters.
this same reason why want use div contenteditable, because in textarea can't that. #
please no jquery javascript
resizable textarea using pure javascript without frameworks:
<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 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 guess =/? or hack dis.style.height = span.offsetheight+"px"; document.body.removechild(span); }, 1 ); //settimeout=hack, since okp 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>
very hackish, put in less 10 minutes. it'll @ least give idea.
only tested on google chrome 5.0.308.0
explanation of code, since fail @ commenting
1) before window.onload, textarea of id "resizableta" has been created , appended document.body of dom tree.
2) window.onload attaches event handler, taoninput [textarea on input].
3) textarea on input creates dummy span, forces width width of textarea , font style "lucida console", afaik default font textareas, copies value of textarea span's innerhtml, while replacing %0a [newline textareas use]
[line break]...
4) span's offsetheight height of span, can used force height of textarea.
can confirm lucida console default font of textarea? consola? courier new? assumed fixed-width font work. don't use mac, dont know fonts shared windows, though think courier new better choice...
Comments
Post a Comment