Redaktimi i një elementi të veçantë në JavaScript
Tani do të mësojmë të redaktojmë tekstet e elementeve duke përdorur fushat e inputit. Do të fillojmë me gjëra të thjeshta dhe gradualisht do t'i ndërlikojmë.
Pra, le të themi se kemi një paragraf dhe një input, të vendosur në të njëjtin prind:
<div id="parent">
<p id="elem">text</p>
<input id="input">
</div>
Le të bëjmë që kur inputi humb fokusin teksti i tij të shfaqet në paragraf:
let elem = document.querySelector('#elem');
let input = document.querySelector('#input');
input.addEventListener('blur', function() {
elem.textContent = this.value;
});
Tani le të bëjmë që kur të hyjmë në faqe në input të jetë tashmë teksti i paragrafit. Në këtë mënyrë ne me anë të inputit do të mund të redaktojmë tekstin e vendosur në paragraf.
Le ta implementojmë:
let elem = document.querySelector('#elem');
let input = document.querySelector('#input');
input.value = elem.textContent; // shkruajmë në input tekstin e paragrafit
input.addEventListener('blur', function() {
elem.textContent = this.value;
});
Modifikoni kodin e mësipërm në mënyrë që teksti i paragrafit të ndryshojë jo pas humbjes së fokusit, por ndërsa shkruhet teksti në input.
Shfaqja e inputit
Tani le të bëjmë që inputi të mos jetë fillimisht në faqe, por të shfaqet në klikim në paragraf. HTML-ja jonë fillestare do të duket kështu:
<div id="parent">
<p id="elem">text</p>
</div>
Për fillim le të implementojmë shfaqjen e inputit, pa redaktim:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function() {
let input = document.createElement('input');
input.value = elem.textContent;
elem.parentElement.appendChild(input);
});
Dhe tani le të bëjmë që kur inputi humb fokusin teksti i paragrafit të ndryshojë:
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);
});
Kodi ynë, megjithatë, nuk është i përsosur, pasi çdo klikim në paragraf do të çojë në shfaqjen e një inputi të ri.
Për të zgjidhur problemin thjesht do të bëjmë që pas humbjes së fokusit të fshihet inputi aktual:
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(); // fshijmë inputin
});
elem.parentElement.appendChild(input);
});
Vetë, pa parë kodin tim, zgjidhni problemin e përshkruar.
