Επεξεργασία μεμονωμένου στοιχείου σε JavaScript
Τώρα θα μάθουμε να επεξεργαζόμαστε κείμενα στοιχείων χρησιμοποιώντας πεδία εισαγωγής. Θα ξεκινήσουμε με απλά πράγματα και θα γινόμαστε σταδιακά πιο σύνθετοι.
Λοιπόν, ας υποθέσουμε ότι έχουμε μια παράγραφο και ένα πεδίο εισαγωγής, τοποθετημένα στον ίδιο γονέα:
<div id="parent">
<p id="elem">text</p>
<input id="input">
</div>
Ας κάνουμε έτσι ώστε όταν χάσει το focus το πεδίο εισαγωγής, το κείμενό του να εμφανίζεται στην παράγραφο:
let elem = document.querySelector('#elem');
let input = document.querySelector('#input');
input.addEventListener('blur', function() {
elem.textContent = this.value;
});
Ας κάνουμε τώρα έτσι ώστε κατά την είσοδο στη σελίδα, στο πεδίο εισαγωγής να υπάρχει ήδη το κείμενο της παραγράφου. Με αυτόν τον τρόπο θα μπορούμε μέσω του πεδίου εισαγωγής να επεξεργαζόμαστε το κείμενο που βρίσκεται στην παράγραφο.
Ας το υλοποιήσουμε:
let elem = document.querySelector('#elem');
let input = document.querySelector('#input');
input.value = elem.textContent; // γράφουμε στο πεδίο εισαγωγής το κείμενο της παραγράφου
input.addEventListener('blur', function() {
elem.textContent = this.value;
});
Τροποποιήστε τον παραπάνω κώδικα έτσι ώστε το κείμενο της παραγράφου να αλλάζει όχι με την απώλεια εστίασης, αλλά καθώς εισάγεται κείμενο στο πεδίο εισαγωγής.
Εμφάνιση του πεδίου εισαγωγής
Ας κάνουμε τώρα έτσι ώστε το πεδίο εισαγωγής να μην υπάρχει αρχικά στη σελίδα, αλλά να εμφανίζεται με κλικ στην παράγραφο. Δηλαδή, το αρχικό μας HTML θα μοιάζει με αυτό:
<div id="parent">
<p id="elem">text</p>
</div>
Αρχικά, ας υλοποιήσουμε απλώς την εμφάνιση του πεδίου εισαγωγής, χωρίς επεξεργασία:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function() {
let input = document.createElement('input');
input.value = elem.textContent;
elem.parentElement.appendChild(input);
});
Και τώρα ας κάνουμε έτσι ώστε με την απώλεια εστίασης στο πεδίο εισαγωγής να αλλάζει το κείμενο της παραγράφου:
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);
});
Ωστόσο, ο κώδικάς μας δεν είναι τέλειος, αφού κάθε κλικ στην παράγραφο θα οδηγεί στην εμφάνιση ενός νέου πεδίου εισαγωγής.
Για να λύσουμε το πρόβλημα, απλώς με την απώλεια εστίας θα διαγράφουμε το τρέχον πεδίο εισαγωγής:
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(); // διαγράφουμε το πεδίο εισαγωγής
});
elem.parentElement.appendChild(input);
});
Αυτόνομα, χωρίς να κοιτάτε τον κώδικά μου, λύστε την περιγραφόμενη εργασία.
