JavaScript में तत्व संपादित करते समय टेक्स्ट छुपाएं

आइए अब ऐसा करें कि संपादन के दौरान इनपुट उसी पैराग्राफ में दिखाई दे - पैराग्राफ के टेक्स्ट के स्थान पर। फिर संपादन समाप्त होने पर इनपुट हट जाए, और उसके स्थान पर फिर से पैराग्राफ का टेक्स्ट दिखाई दे।

आइए कार्यान्वयन शुरू करें।

शुरुआत में आइए ऐसा करें कि पैराग्राफ पर क्लिक करने पर उसके अंत में एक इनपुट जुड़ जाए जिसमें उस पैराग्राफ का टेक्स्ट हो:

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

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

हालाँकि, हमारा कोड बहुत ही अपूर्ण है - हर बार पैराग्राफ पर क्लिक करने पर उसमें एक नया इनपुट जुड़ता जाएगा।

इस स्थिति में, यदि पहले इनपुट में पैराग्राफ का टेक्स्ट होगा, तो दूसरे इनपुट में पहले इनपुट सहित पैराग्राफ का टेक्स्ट होगा, और तीसरे इनपुट में पहले से दो इनपुट सहित पैराग्राफ का टेक्स्ट होगा और इसी तरह आगे भी।

इसके अलावा इस बात पर भी ध्यान दें कि जोड़े गए इनपुट पर क्लिक करना पैराग्राफ पर क्लिक करने जैसा माना जाएगा: बात यह है कि इनपुट पैराग्राफ के अंदर है, और इनपुट पर क्लिक करना बस इस पैराग्राफ तक ऊपर उठ जाएगा (बबल अप हो जाएगा)।

इसके कारण, पहला इनपुट दिखाई देने के बाद उसे दबाने (क्लिक करने) की कोशिश करने पर ताकि संपादन शुरू किया जा सके, हम स्वचालित रूप से पैराग्राफ पर क्लिक कर देंगे जिसके सभी परिणामस्वरूप समस्याएँ होंगी।

तो, समस्या का चित्रण हो गया है। आइए अब इसे ठीक करें।

इसके लिए बस इनपुट के दिखाई देते ही पैराग्राफ से क्लिक हैंडलर को हटा दें (अनबाइंड कर दें)। इस स्थिति में केवल पैराग्राफ पर पहला क्लिक ही इनपुट के दिखाई देने का कारण बनेगा, और इनपुट के दिखाई देने के बाद किए गए बाकी क्लिक, नजरअंदाज कर दिए जाएंगे।

आइए लागू करें:

javascriptlet 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); // ईवेंट को अनबाइंड करें
});

आइए अब ऐसा करें कि इनपुट के दिखाई देते ही, पैराग्राफ का अपना टेक्स्ट गायब हो जाए। इसके लिए इनपुट डालने से पहले पैराग्राफ का textContent खाली स्ट्रिंग के बराबर कर दें:

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

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  
  input.value = elem.textContent; // पहले पैराग्राफ का टेक्स्ट इनपुट में लिखें
  elem.textContent = ''; // फिर पैराग्राफ का टेक्स्ट हटाएं
  elem.appendChild(input); // फिर इनपुट डालें
  
  elem.removeEventListener('click', func);
});

आइए अब ऐसा करें कि इनपुट में फोकस खोने (ब्लर) पर इस इनपुट का टेक्स्ट पैराग्राफ में लिखा जाए:

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

इस बात पर ध्यान दें कि हमें इनपुट को हटाने (डिलीट करने) की आवश्यकता नहीं है - यह स्वयं ही हट जाता है, जब इसका टेक्स्ट पैराग्राफ में लिखा जाता है: क्योंकि इनपुट पैराग्राफ के टेक्स्ट का एक हिस्सा है, तो कुछ टेक्स्ट को इस पैराग्राफ में लिखना बस हमारे इनपुट को हटा देता है, और बस।

हालाँकि, हमारे पास एक और समस्या है: पैराग्राफ का टेक्स्ट केवल पहली बार ही संपादित होगा। पहले संपादन के बाद पैराग्राफ के टेक्स्ट पर दोबारा क्लिक करने से कुछ नहीं होगा।

बात यह है कि इनपुट के दिखाई देने के क्षण में हमने ऊपर बताए गए कारणों से पैराग्राफ से ईवेंट को अनबाइंड कर दिया था। अब हमें संपादन समाप्त होने के क्षण में ईवेंट को वापस बाइंड करने की आवश्यकता है।

आइए इसे करें:

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