Chỉnh sửa phần tử riêng lẻ bằng JavaScript

Bây giờ chúng ta sẽ học cách chỉnh sửa văn bản của các phần tử bằng trường nhập liệu. Hãy bắt đầu với những điều đơn giản và dần dần làm phức tạp thêm.

Vậy, giả sử chúng ta có một đoạn văn và một trường nhập liệu, được đặt cùng trong một phần tử cha:

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

Hãy làm sao để khi mất tiêu điểm trong trường nhập liệu, văn bản của nó sẽ xuất hiện trong đoạn văn:

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

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

Bây giờ hãy làm sao để khi vào trang, trong trường nhập liệu đã có sẵn văn bản của đoạn văn. Bằng cách này, chúng ta có thể sử dụng trường nhập liệu để chỉnh sửa văn bản nằm trong đoạn văn.

Hãy thực hiện:

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

input.value = elem.textContent; // ghi văn bản của đoạn văn vào trường nhập liệu

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

Hãy sửa đổi đoạn mã trên sao cho văn bản của đoạn văn thay đổi không phải khi mất tiêu điểm, mà trong quá trình nhập văn bản vào trường nhập liệu.

Sự xuất hiện của trường nhập liệu

Bây giờ hãy làm sao để ban đầu không có trường nhập liệu trên trang, mà nó xuất hiện khi nhấp vào đoạn văn. Nghĩa là HTML ban đầu của chúng ta sẽ trông như thế này:

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

Đầu tiên, hãy chỉ thực hiện việc trường nhập liệu xuất hiện, không có chỉnh sửa:

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

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

Và bây giờ hãy làm sao để khi mất tiêu điểm trong trường nhập liệu, văn bản của đoạn văn sẽ thay đổi:

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

Tuy nhiên, mã của chúng ta không hoàn hảo, vì mỗi lần nhấp vào đoạn văn sẽ dẫn đến sự xuất hiện của một trường nhập liệu mới.

Để giải quyết vấn đề, chỉ cần khi mất tiêu điểm sẽ xóa trường nhập liệu hiện tại:

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(); // xóa trường nhập liệu
	});
	
	elem.parentElement.appendChild(input);
});

Tự mình, không nhìn vào mã của tôi, hãy giải quyết nhiệm vụ đã mô tả.