자바스크립트로 개별 요소 편집하기

이제 입력 필드를 사용하여 요소의 텍스트를 편집하는 방법을 배워보겠습니다. 간단한 것부터 시작하여 점점 더 복잡해지도록 하겠습니다.

그럼, 동일한 부모 안에 단락과 입력 필드가 주어졌다고 가정해 보겠습니다:

<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.textContent = this.value;
});

이제 페이지에 들어갔을 때 입력 필드에 단락의 텍스트가 이미 들어가 있도록 만들어 봅시다. 이렇게 하면 입력 필드를 사용하여 단락에 있는 텍스트를 편집할 수 있습니다.

구현해 봅시다:

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.value = elem.textContent; // 입력 필드에 단락 텍스트를 씁니다

input.addEventListener('blur', function() {
	elem.textContent = 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.textContent;
	
	elem.parentElement.appendChild(input);
});

이제 입력 필드에서 포커스를 잃었을 때 단락의 텍스트가 변경되도록 만들어 봅시다:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
	});
	
	elem.parentElement.appendChild(input);
});

그러나 우리 코드는 완벽하지 않습니다. 단락을 클릭할 때마다 새로운 입력 필드가 나타나기 때문입니다.

이 문제를 해결하기 위해 포커스를 잃을 때 현재 입력 필드를 삭제하도록 하겠습니다:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		this.remove(); // 입력 필드를 삭제합니다
	});
	
	elem.parentElement.appendChild(input);
});

내 코드를 보지 않고 스스로 설명된 문제를 해결하세요.