<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="my.css">
<meta charset="utf-8">
</head>
<body>
<ul>
<li>Click the div to edit.</li>
<li>Enter or blur saves the result.</li>
</ul>
HTML is allowed.
<div id="view" class="view">Text</div>
<script>
let area = null;
let view = document.getElementById('view');
//view is the div to turn into txtarea
view.onclick = function() {
editStart();
};
function editStart() {
//when VIEW clicked, create A TXTAREA
area = document.createElement('textarea');
area.className = 'edit';
area.value = view.innerHTML;
area.onkeydown = function(event) {
if (event.key == 'Enter') {
this.blur();//area is out of focus
}
};
area.onblur = function(){
editEnd();
};
view.replaceWith(area);
area.focus();
}
function editEnd() {
//each time area is blur, update the area content to view
view.innerHTML = area.value;
area.replaceWith(view);
//are is literally replaced with view
/*the Childnod.replaceWith() method replaces
this childnode in the children list of its parent
with a set of node or DOM string objects. DOM string OBJECTS ARE
INSERTED AS EQUIVALENT TXT NODES
*/
}
</script>
</body>
</html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="my.css">
<meta charset="utf-8">
</head>
<body>
<ul>
<li>Click the div to edit.</li>
<li>Enter or blur saves the result.</li>
</ul>
HTML is allowed.
<div id="view" class="view">Text</div>
<script>
let area = null;
let view = document.getElementById('view');
//view is the div to turn into txtarea
view.onclick = function() {
editStart();
};
function editStart() {
//when VIEW clicked, create A TXTAREA
area = document.createElement('textarea');
area.className = 'edit';
area.value = view.innerHTML;
area.onkeydown = function(event) {
if (event.key == 'Enter') {
this.blur();//area is out of focus
}
};
area.onblur = function(){
editEnd();
};
view.replaceWith(area);
area.focus();
}
function editEnd() {
//each time area is blur, update the area content to view
view.innerHTML = area.value;
area.replaceWith(view);
//are is literally replaced with view
/*the Childnod.replaceWith() method replaces
this childnode in the children list of its parent
with a set of node or DOM string objects. DOM string OBJECTS ARE
INSERTED AS EQUIVALENT TXT NODES
*/
}
</script>
</body>
</html>
댓글
댓글 쓰기