JavaScript 요소 편집 시 텍스트 숨기기

이제 편집 시 입력 필드(input)가 해당 단락 자체의 텍스트 대신 나타나도록 만들어 봅시다. 그런 다음 편집이 끝나면 입력 필드는 사라지고, 다시 단락 텍스트가 나타나게 합니다.

구현을 시작해 보겠습니다.

먼저, 단락을 클릭할 때 해당 단락 텍스트를 내용으로 하는 입력 필드가 단락 끝에 추가되도록 만들어 봅시다:

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

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

하지만 우리 코드는 매우 불완전합니다. 단락을 클릭할 때마다 새 입력 필드가 추가될 것입니다.

이때, 첫 번째 입력 필드에 단락 텍스트가 들어 있다면, 두 번째 입력 필드에는 첫 번째 입력 필드를 포함한 단락 텍스트가, 세 번째 입력 필드에는 두 개의 입력 필드를 포함한 단락 텍스트가 들어가는 식으로 계속될 것입니다.

또한, 추가된 입력 필드를 클릭하는 것이 단락을 클릭하는 것으로 간주된다는 점에 주의하세요. 입력 필드가 단락 내부에 있기 때문에, 입력 필드에 대한 클릭은 단순히 이 단락으로 버블링(전파)됩니다.

이는 첫 번째 입력 필드가 나타난 후, 편집을 시작하려고 입력 필드를 클릭하면 자동으로 단락을 클릭하게 되어 모든 파생 효과가 발생하게 만듭니다.

자, 문제가 명확해졌습니다. 이제 이 문제를 해결해 봅시다.

이를 위해, 입력 필드가 나타날 때 단락에서 클릭 핸들러를 제거하면 됩니다. 이렇게 하면 단락에 대한 첫 번째 클릭만 입력 필드가 나타나게 하고, 입력 필드가 나타난 후 발생하는 다른 클릭들은 무시됩니다.

구현해 봅시다:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.appendChild(input);
	
	elem.removeEventListener('click', func); // 이벤트 제거
});

이제 입력 필드가 나타날 때 단락 자체의 텍스트가 사라지도록 만들어 봅시다. 입력 필드를 삽입하기 전에 단락의 textContent를 빈 문자열로 할당하면 됩니다:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // 먼저 단락 텍스트를 입력 필드에 기록
	elem.textContent = ''; // 그런 다음 단락 텍스트 제거
	elem.appendChild(input); // 그런 다음 입력 필드 삽입
	
	elem.removeEventListener('click', func);
});

이제 입력 필드에서 포커스를 잃을 때(focus out) 해당 입력 필드의 텍스트가 단락에 기록되도록 만들어 봅시다:

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

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

입력 필드를 삭제할 필요가 없다는 점에 주의하세요. 입력 필드는 자신의 텍스트를 단락에 기록할 때 스스로 삭제됩니다: 입력 필드가 단락 텍스트의 일부이기 때문에, 어떤 텍스트를 이 단락에 기록하는 것은 단순히 우리의 입력 필드를 삭제하는 것입니다.

그러나 우리에게는 또 다른 문제가 있습니다: 단락 텍스트는 오직 첫 번째로만 편집될 것입니다. 첫 번째 편집 이후 단락 텍스트를 다시 클릭해도 아무 일도 일어나지 않을 것입니다.

그 이유는, 위에서 설명한 이유로 입력 필드가 나타나는 순간에 우리가 단락에서 이벤트를 제거했기 때문입니다. 이제 편집이 끝나는 순간에 이벤트를 다시 부착해야 합니다.

이를 해결해 봅시다:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.textContent = '';
	elem.appendChild(input);
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		elem.addEventListener('click', func); // 이벤트 다시 부착
	});
	
	elem.removeEventListener('click', func);
});

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