Live
x
<html><head> <title>Edit Content on Double-Click</title></head><body> <h1>Edit Content on Double-Click</h1> <p> Double-click on the text in the box to edit: <span class="editable" id="editableText" ondblclick="enableEditing(this)"> Editable Text </span> </p></body></html>
Live
xxxxxxxxxx6
.editable { border: 1px solid gray; padding: 5px; display: inline-block; cursor: pointer; }
Live
xxxxxxxxxx16
function enableEditing(element) { var text = element.innerText; element.innerHTML = '<input type="text" value="' + text + '">'; var input = element.querySelector('input'); input.focus(); input.addEventListener('blur', function() { element.innerText = input.value; }); input.addEventListener('keypress', function(event) { if (event.key === 'Enter') { element.innerText = input.value; } }); }
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.