Dynamic title update from contenteditable

Question

I'm making a little data URI for taking notes

data:text/html
<title>Text Editor</title>
<body>
  <div contenteditable class="text" id="title">Title...</div>
  <div contenteditable class="text">Body...</div>
</body>

https://jsfiddle.net/ab3hh3ka/

I'm wondering what kind of JavaScript could I use to dynamically update the title of the page as you write in the #title field. The goal is to be able to hit Ctrl+S to be to save the file with the title already in place.

I'm not sure what you mean "a little data URI". This is a data URI: https://css-tricks.com/data-uris/ — Flimm, May 20 '16 at 13:42
Possible duplicate of [contenteditable change events](http://stackoverflow.com/questions/1391278/contenteditable-change-events) — Flimm, May 20 '16 at 13:43
To edit the title using JQuery, run `$("title").text($("#title").text());` The question I linked to has data about how to get this to run when contenteditable changes. — Flimm, May 20 '16 at 13:44
I must add, I can't use JQuery as is a data URI, meaning all code has to be input in the address bar. — Miguel Bartelsman, May 20 '16 at 14:08
Yes, aadams solution did the trick. I often find myself at work without external internet connection, but since we work through a browser in an intranet, the bookmarklet becomes very handy — Miguel Bartelsman, May 23 '16 at 03:06

score 1 · Accepted Answer · answered May 20 '16 at 13:49

For modern browsers, you can watch for the HTML5 input event for contenteditable elements like so (pure JS):

document.getElementById("title").addEventListener("input", function(e) {
    var value = e.srcElement.innerHTML;
    document.title = value;
}, false);

https://jsfiddle.net/ab3hh3ka/3/

Dynamic title update from contenteditable

1 Answers1