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

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

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

html<div id="parent">
  <p id="elem">text</p>
  <input id="input">
</div>

입력 필드에서 포커스를 잃었을 때 그 텍스트가 단락에 나타나도록 만들어 봅시다:

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

input.addEventListener('blur', function() {
  elem.textContent = this.value;
});

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

구현해 봅시다:

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

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

input.addEventListener('blur', function() {
  elem.textContent = this.value;
});

입력 필드 표시

이제 입력 필드가 처음에는 페이지에 없고, 단락을 클릭했을 때 나타나도록 만들어 봅시다. 즉, 초기 HTML은 다음과 같이 보일 것입니다:

html<div id="parent">
  <p id="elem">text</p>
</div>

먼저 편집 없이 단순히 입력 필드가 나타나도록 구현해 보겠습니다:

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

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

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

javascriptlet 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);
});

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

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

javascriptlet 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);
});