来自 contenteditable 的动态标题更新

Question

我正在制作一个小数据 URI 用于做笔记

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/

我想知道我可以使用哪种 JavaScript 来动态更新您在 #title 字段中写入的页面标题。目标是能够按 Ctrl+S 来保存标题已经存在的文件。

Answer 1

对于现代浏览器，您可以观察 HTML5 contenteditable 元素的输入事件，例如（纯 JS）：

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

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

来自 contenteditable 的动态标题更新

Dynamic title update from contenteditable

html

javascript

title

data-uri