Αποκρύπτουμε το κείμενο κατά την επεξεργασία ενός στοιχείου στο JavaScript

Ας κάνουμε τώρα έτσι ώστε κατά την επεξεργασία το input να εμφανίζεται στην ίδια την παράγραφο - αντί για το κείμενο αυτής της παραγράφου. Ας στη συνέχεια, κατά το τέλος της επεξεργασίας το input να αφαιρείται, και αντί για αυτό να εμφανίζεται πάλι το κείμενο της παραγράφου.

Ας προχωρήσουμε στην υλοποίηση.

Για αρχή, ας κάνουμε έτσι ώστε με κλικ στην παράγραφο να προστίθεται στο τέλος της ένα input με το κείμενο αυτής της παραγράφου:

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

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

Ο κώδικάς μας, ωστόσο, είναι πολύ ατελής - κάθε φορά που γίνεται κλικ στην παράγραφο θα προστίθεται ένα νέο input.

Ταυτόχρονα, αν στο πρώτο input βρίσκεται το κείμενο της παραγράφου, τότε στο δεύτερο input θα βρίσκεται το κείμενο της παραγράφου μαζί με το πρώτο input, και στο τρίτο input θα βρίσκεται ήδη το κείμενο της παραγράφου μαζί με δύο inputs και ούτω καθεξής.

Παρατηρήστε επίσης ότι το κλικ στο προστιθέμενο input θα αντιμετωπίζεται ως κλικ στην παράγραφο: το γεγονός είναι ότι το input βρίσκεται στην παράγραφο, και το κλικ στο input απλώς θα "αναδυθεί" προς τα πάνω σε αυτήν την παράγραφο.

Αυτό θα οδηγήσει στο γεγονός ότι μετά την εμφάνιση του πρώτου input, όταν προσπαθούμε να πατήσουμε πάνω του για να αρχίσουμε την επεξεργασία, εμείς αυτόματα θα κάνουμε κλικ στην παράγραφο με όλες τις επακόλουθες συνέπειες.

Λοιπόν, το πρόβλημα έχει περιγραφεί. Ας τώρα το διορθώσουμε.

Για αυτό, απλώς κατά την εμφάνιση του input θα αποσυνδέσουμε από την παράγραφο τον χειριστή του κλικ. Σε αυτήν την περίπτωση μόνο το πρώτο κλικ στην παράγραφο θα προκαλεί την εμφάνιση του input, ενώ τα υπόλοιπα κλικ, που γίνονται μετά την εμφάνιση του 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); // αποσυνδέουμε το συμβάν
});

Ας κάνουμε τώρα έτσι ώστε κατά την εμφάνιση του input, το κείμενο της ίδιας της παραγράφου να εξαφανίζεται. Για αυτό πριν την εισαγωγή του input, το textContent της παραγράφου θα το ορίσουμε ως κενή συμβολοσειρά:

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

elem.addEventListener('click', function func() {
	let input = document.createElement('input');
	
	input.value = elem.textContent; // πρώτα γράφουμε το κείμενο της παραγράφου στο input
	elem.textContent = ''; // έπειτα αφαιρούμε το κείμενο της παραγράφου
	elem.appendChild(input); // έπειτα εισάγουμε το input
	
	elem.removeEventListener('click', func);
});

Ας κάνουμε τώρα έτσι ώστε κατά την απώλεια της εστίασης στο input, το κείμενο αυτού του input να γράφεται στην παράγραφο:

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

Παρατηρήστε ότι δεν χρειάζεται να διαγράψουμε το input - αυτό διαγράφεται από μόνο του, όταν γράφει το κείμενό του στην παράγραφο: αφού το input αποτελεί μέρος του κειμένου της παραγράφου, η εγγραφή κάποιου κειμένου σε αυτήν την παράγραφο απλώς διαγράφει το input μας, και τέλος.

Έχουμε, ωστόσο, ένα ακόμη πρόβλημα: το κείμενο της παραγράφου θα επεξεργάζεται μόνο την πρώτη φορά. Μετά την πρώτη επεξεργασία, η επαναλαμβανόμενη πίεση στο κείμενο της παραγράφου δεν θα οδηγεί σε τίποτα.

Το γεγονός είναι ότι τη στιγμή της εμφάνισης του input αποσυνδέσαμε το συμβάν από την παράγραφο για τους λόγους που περιγράφηκαν παραπάνω. Τώρα χρειάζεται τη στιγμή του τέλους της επεξεργασίας να επισυνάψουμε το συμβάν ξανά.

Ας το κάνουμε:

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

Αυτόνομα, χωρίς να κοιτάτε τον κώδικά μου, λύστε την περιγραφόμενη άσκηση.