Using the web browser as an online Notepad

Reading my RSS I find an article in VeryComputer which in turn leads to a post by José Jesús Pérez Aguinaga, where he shows us how to use the format Date URI which together with the power of HTML5 and a new element called 'contenteditable', allows us to create an HTML page that we can use as a Notepad.

We just have to put in the address bar:

data:text/html, <html contenteditable>

At post by José Jesús Pérez Aguinaga, some other examples that are worth looking at appear through the comments:

data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />
data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">

I tried it on Firefox y Chromium and it works perfectly .. I guess it should work in any other browser with HTML5 support 😀


Leave a Comment

Your email address will not be published. Required fields are marked with *

*

*

  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.

  1.   rots87 said

    hahaha curiosities of the html5 I suppose that it will serve me at some point instead of opening another editor ... thanks

  2.   wow said

    Man, the real use I see is to see how an html code would look (if you are designing something in html). Let me explain: in the address bar you put all the html options and then write whatever, so you can see a "hot preview", without having to use an editor with html display options or having to save files and opening them with the browser.

  3.   sieg84 said

    also works in Opera

    1.    Cristianhcd said

      I prefer a thousand times the notes integrated in the browser, which is usual

  4.   eco-slacker said

    It may not interest many, but in Konqueror it works.

    Greetings.

  5.   elynx said

    ummm… the art of innovation 😉

    Good (and)… Greetings!

  6.   cronos said

    Very interesting, everything integrated into the browser is not a bad idea, and apparently this will happen with HTML5.

  7.   daniel c. said

    This buinisiimooo, it was good for me, I was looking for something like that without having to install something google web store

  8.   dae said

    it works with vivaldi, and the file explorer also works:
    file: // localhost /