Skip to content

Instantly share code, notes, and snippets.

@srcoley
Created March 12, 2013 11:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save srcoley/5142268 to your computer and use it in GitHub Desktop.
Save srcoley/5142268 to your computer and use it in GitHub Desktop.
A data uri that uses inline css and javascript to turn your browser into a notepad. The javascript converts tab keystrokes into four spaces as presented here: http://stackoverflow.com/questions/1105452/catching-tabs-in-textarea. Tapping tab otherwise, would cause the textarea to lose focus.
data:text/html, <html><head><style>html, body {height:100%;}#text-area {width: 100%;height: 100%;color: #868686;font-size: 18px;font-family: Helvetica;border: 0px;letter-spacing: 1px;outline: none;}</style></head><body><textarea id="text-area"></textarea><script type="text/javascript">function insertAtCursor(a,b){if(document.selection){var c;a.focus(),sel=document.selection.createRange(),c=sel.text.length,sel.text=b,0==b.length?(sel.moveStart("character",b.length),sel.moveEnd("character",b.length)):sel.moveStart("character",-b.length+c),sel.select()}else if(a.selectionStart||"0"==a.selectionStart){var d=a.selectionStart,e=a.selectionEnd;a.value=a.value.substring(0,d)+b+a.value.substring(e,a.value.length),a.selectionStart=d+b.length,a.selectionEnd=d+b.length}else a.value+=b}document.getElementById("text-area").onkeydown=function(a){a||9!=event.keyCode?9==a.keyCode&&(a.preventDefault(),insertAtCursor(document.getElementById("text-area")," ")):(event.returnValue=!1,insertAtCursor(document.getElementById("text-area")," "))},document.getElementById("text-area").focus();</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment