Сейчас мы с вами научимся редактировать тексты элементов с помощью полей ввода. Начнем с простых вещей и будем постепенно усложнять.
Итак, пусть у нас даны абзац и инпут, расположенные в одном родителе:
<div id="parent">
<p id="elem">text</p>
<input id="input">
</div>
Давайте сделаем так, чтобы по потери фокуса в инпуте его текст появлялся в абзаце:
let elem = document.querySelector('#elem');
let input = document.querySelector('#input');
input.addEventListener('blur', function() {
elem.innerHTML = this.value;
});
Давайте теперь сделаем так, чтобы по заходу на страницу в инпуте уже стоял текст абзаца. Таким образом мы с помощью инпута сможем редактировать текст, расположенный в абзаце.
Реализуем:
let elem = document.querySelector('#elem');
let input = document.querySelector('#input');
input.value = elem.innerHTML; // записываем в инпут текст абзаца
input.addEventListener('blur', function() {
elem.innerHTML = this.value;
});
Модифицируйте приведенный выше код так, чтобы текст абзаца менялся не по потери фокуса, а по мере ввода текста в инпут.
Появление инпута
Давайте теперь сделаем так, чтобы инпута изначально не было на странице, а он появлялся по клику на абзац. То есть наш начальный HTML будет выглядеть так:
<div id="parent">
<p id="elem">text</p>
</div>
Для начала просто реализуем появление инпута, без редактирования:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function() {
let input = document.createElement('input');
input.value = elem.innerHTML;
elem.parentElement.appendChild(input);
});
А теперь давайте сделаем так, чтобы по потери фокуса в инпуте менялся текст абзаца:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function() {
let input = document.createElement('input');
input.value = elem.innerHTML;
input.addEventListener('blur', function() {
elem.innerHTML = this.value;
});
elem.parentElement.appendChild(input);
});
Наш код, однако, несовершенен, так как каждое нажатие на абзац будет приводить к появлению нового инпута.
Для решения проблемы просто будем по потери фокуса удалять текущий инпут:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function() {
let input = document.createElement('input');
input.value = elem.innerHTML;
input.addEventListener('blur', function() {
elem.innerHTML = this.value;
this.parentElement.removeChild(this); // удалим инпут
});
elem.parentElement.appendChild(input);
});
Самостоятельно, не подсматривая в мой код, решите описанную задачу.