Dynamische Titel-Update von contenteditable

Ich mache ein wenig Daten URI für NotizenDynamische Titel-Update von contenteditable

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/

Ich frage mich, welche Art von JavaScript konnte ich dynamisch den Titel der Seite zu aktualisieren verwenden, um wie Sie im Feld #title schreiben. Das Ziel ist, Ctrl + S zu treffen, um die Datei mit dem bereits vorhandenen Titel zu speichern.

Quelle

2016-05-20 Miguel Bartelsman

Ich bin nicht sicher, was du meinst „ein wenig Daten URI ". Dies ist ein Daten-URI: https://css-tricks.com/data-uris/ – Flimm

Mögliches Duplikat von [contenteditable change events] (http://stackoverflow.com/questions/1391278/contenteditable-change-events) – Flimm

To editiere den Titel mit JQuery, führe '$ (" title "). text ($ (" # title "). text());' Die Frage, zu der ich verlinkt habe, enthält Daten darüber, wie man dies bei zufriedenen Benutzern ausführen kann. – Flimm

Für modernen Browser, können Sie für das Eingabeereignis HTML5 Uhr für contenteditable Elemente wie so (reine JS):

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

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

Quelle

2016-05-20 13:49:04 adaam

Das tat es, danke –

@MiguelBartelsman Großartig! Gehen Sie voran und akzeptieren Sie die Antwort, indem Sie auf das Häkchen klicken. – Flimm

Dynamische Titel-Update von contenteditable

Antwort

Verwandte Themen