Ẩn văn bản khi chỉnh sửa phần tử bằng JavaScript

Bây giờ hãy làm sao để khi chỉnh sửa, ô input xuất hiện ngay trong đoạn văn - thay thế cho văn bản của đoạn văn đó. Sau đó, khi kết thúc việc chỉnh sửa, ô input sẽ bị loại bỏ, và thay vào đó lại xuất hiện văn bản của đoạn văn.

Hãy bắt đầu triển khai.

Đầu tiên, hãy làm sao để khi nhấp vào đoạn văn, một ô input có văn bản của đoạn văn đó được thêm vào cuối nó:

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

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

Tuy nhiên, mã của chúng ta rất không hoàn hảo - mỗi lần nhấp vào đoạn văn, một ô input mới sẽ được thêm vào nó.

Khi đó, nếu trong ô input đầu tiên có chứa văn bản của đoạn văn, thì trong ô input thứ hai sẽ chứa văn bản của đoạn văn cùng với ô input đầu tiên, và ô input thứ ba sẽ chứa văn bản của đoạn văn cùng với hai ô input và cứ thế tiếp tục.

Cũng hãy chú ý rằng việc nhấp vào ô input đã được thêm vào sẽ được coi là nhấp vào đoạn văn: vấn đề ở chỗ là ô input nằm trong đoạn văn, và cú nhấp vào ô input sẽ đơn giản nổi bọt lên (bubble up) đoạn văn này.

Điều này sẽ dẫn đến việc sau khi ô input đầu tiên xuất hiện, khi cố gắng nhấn vào nó để bắt đầu chỉnh sửa, chúng ta sẽ tự động thực hiện một cú nhấp vào đoạn văn với tất cả những hậu quả kéo theo.

Vậy là, vấn đề đã được phác thảo. Bây giờ hãy sửa chữa nó.

Để làm điều này, chỉ cần khi ô input xuất hiện, hãy gỡ bỏ trình xử lý sự kiện nhấp chuột khỏi đoạn văn. Trong trường hợp này, chỉ cú nhấp chuột đầu tiên vào đoạn văn sẽ dẫn đến việc xuất hiện ô input, còn những cú nhấp chuột khác, được thực hiện sau khi ô input xuất hiện, sẽ bị bỏ qua.

Hãy triển khai:

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); // gỡ bỏ sự kiện
});

Bây giờ hãy làm sao để khi ô input xuất hiện, văn bản của chính đoạn văn biến mất. Để làm điều này, trước khi chèn ô input, hãy gán textContent của đoạn văn thành chuỗi rỗng:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // đầu tiên ghi văn bản của đoạn văn vào ô input
	elem.textContent = ''; // sau đó loại bỏ văn bản của đoạn văn
	elem.appendChild(input); // sau đó chèn ô input vào
	
	elem.removeEventListener('click', func);
});

Bây giờ hãy làm sao để khi mất tiêu điểm trong ô input, văn bản của ô input đó được ghi vào đoạn văn:

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

Hãy chú ý rằng chúng ta không cần xóa ô input - nó tự xóa chính mình khi ghi văn bản của nó vào đoạn văn: vì ô input là một phần của văn bản đoạn văn, nên việc ghi một văn bản nào đó vào đoạn văn này sẽ đơn giản là xóa ô input của chúng ta, và thế là xong.

Tuy nhiên, chúng ta còn có một vấn đề nữa: văn bản của đoạn văn sẽ chỉ được chỉnh sửa lần đầu tiên. Sau lần chỉnh sửa đầu tiên, việc nhấn lại vào văn bản của đoạn văn sẽ không dẫn đến điều gì cả.

Vấn đề là ở thời điểm ô input xuất hiện, chúng ta đã gỡ bỏ sự kiện khỏi đoạn văn vì những lý do đã mô tả ở trên. Bây giờ chúng ta cần vào thời điểm kết thúc việc chỉnh sửa, gắn lại sự kiện.

Hãy làm điều này:

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); // gắn lại sự kiện
	});
	
	elem.removeEventListener('click', func);
});

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