jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-18 14:46:13 +03:00
parent 1f61c2ab1d
commit af0ee2a49e
66 changed files with 12263 additions and 2059 deletions
Download patch file Download diff file Expand all files Collapse all files

54
2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/index.html Normal file
View file

@ -0,0 +1,54 @@
<!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.onclick = function() {
editStart();
};
function editStart() {
area = document.createElement('textarea');
area.className = 'edit';
area.value = view.innerHTML;
area.onkeydown = function(event) {
if (event.key == 'Enter') {
this.blur();
}
};
area.onblur = function() {
editEnd();
};
view.replaceWith(area);
area.focus();
}
function editEnd() {
view.innerHTML = area.value;
area.replaceWith(view);
}
</script>
</body>
</html>

25
2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css Normal file
View file

@ -0,0 +1,25 @@
.view,
.edit {
height: 150px;
width: 400px;
font-family: arial;
font-size: 14px;
display: block;
}
.view {
/* padding + border = 3px */
padding: 2px;
border: 1px solid black;
}
.edit {
/* replace padding with border (still 3px not to shift the contents) */
border: 3px solid blue;
padding: 0px;
}
.edit:focus {
outline: none;
/* remove focus border in Safari */
}