JavaScript တွင် အစိတ်အပိုင်းတစ်ခုကို တည်းဖြတ်သည့်အခါ စာသားကို ဝှက်ထားခြင်း

ယခု ကျွန်ုပ်တို့ ပြုလုပ်မည့်အရာမှာ တည်းဖြတ်သည့်အခါ input သည် စာပိုဒ်၏ စာသားအစား ထိုစာပိုဒ်အတွင်း၌ပင် ပေါ်လာစေရန် ဖြစ်သည်။ တည်းဖြတ်မှု ပြီးဆုံးသွားသောအခါ input ကို ဖယ်ရှားပြီး ယင်းအစား စာပိုဒ်၏စာသား ပြန်ပေါ်လာစေရန် ဖြစ်သည်။

အကောင်အထည်ဖော်ခြင်းကို စတင်ကြပါစို့။

စတင်ရန် စာပိုဒ်ကို နှိပ်လိုက်သည့်အခါ ၎င်း၏အဆုံးတွင် ထိုစာပိုဒ်၏ စာသားပါသော input တစ်ခု ထည့်ပေးပါစို့။

javascriptlet 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 တွင်မူ စာပိုဒ်၏စာသား၊ input နှစ်ခုနှင့် စာသားအားလုံးပါဝင်နေမည် စသဖြင့်ဖြစ်နေမည်။

ထပ်မံထည့်ထားသော input ကို နှိပ်လိုက်သည်ကလည်း စာပိုဒ်ကို နှိပ်လိုက်သည်ဟု သတ်မှတ်ခံရမည်ကိုလည်း သတိပြုပါ။ အကြောင်းမှာ input သည် စာပိုဒ်အတွင်း၌ တည်ရှိနေပြီး input ကို နှိပ်လိုက်သည့် event သည် ထိုစာပိုဒ်ဆီသို့ ပြန်၍ မြှင့်တက်သွားမည် (bubble up) ဖြစ်သည်။

ဤအချက်ကြောင့် ပထမ input ပေါ်လာပြီးနောက် တည်းဖြတ်ရန် ၎င်းကို နှိပ်ရန် ကြိုးစားသည့်အခါတိုင်း ကျွန်ုပ်တို့သည် စာပိုဒ်ကို နှိပ်မိသည်ဟု သတ်မှတ်ခံရပြီး ဆက်နွှယ်နေသော အကျိုးဆက်များ ဖြစ်ပေါ်လာမည်။

ထို့ကြောင့် ပြဿနာကို ရှင်းပြပြီးပါပြီ။ ယခု ကျွန်ုပ်တို့ ပြင်ဆင်ကြပါစို့။

ဤအတွက် input ပေါ်လာသည့်အခါ စာပိုဒ်မှ ကလစ် event handler ကို ဖြုတ်လိုက်ရုံဖြင့် ရပါသည်။ ဤနည်းဖြင့် စာပိုဒ်ကို ပထမအကြိမ် နှိပ်သည့်အခါမှသာ input ပေါ်လာမည်ဖြစ်ပြီး 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); // event ကို ဖြုတ်ပါမည်
});

ယခု input ပေါ်လာသည့်အခါ စာပိုဒ်၏စာသား ပျောက်ကွယ်သွားစေရန် ပြုလုပ်ကြပါစို့။ ဤအတွက် input ထည့်သွင်းမှုမပြုမီ စာပိုဒ်၏ textContent ကို စာသားမဲ့ (empty string) အဖြစ် သတ်မှတ်ပေးရန် ဖြစ်သည်။

javascriptlet 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 အတွင်း focus ပျောက်သွားသည့်အခါ ထို input ၏စာသားကို စာပိုဒ်ထဲသို့ ပြန်ရေးသွင်းစေရန် ပြုလုပ်ကြပါစို့။

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

Input ကို ဖယ်ရှားရန် ကျွန်ုပ်တို့ မလိုအပ်ကြောင်း သတိပြုပါ။ ၎င်းသည် ၎င်း၏စာသားကို စာပိုဒ်ထဲသို့ ရေးသွင်းသည့်အခါ ကိုယ်တိုင်ပင် ပျောက်ကွယ်သွားမည်။ အဘယ်ကြောင့်ဆိုသော် input သည် စာပိုဒ်၏စာသားအပိုင်းအစတစ်ခု ဖြစ်နေပြီး မည်သည့်စာသားကိုမဆို ဤစာပိုဒ်ထဲသို့ ရေးသွင်းလိုက်ခြင်းသည် ကျွန်ုပ်တို့၏ input ကို ဖယ်ရှားလိုက်ခြင်းနှင့် အတူတူပင်ဖြစ်သည်။

သို့သော် ကျွန်ုပ်တို့တွင် နောက်ထပ် ပြဿနာတစ်ခု ရှိနေသေးသည်။ စာပိုဒ်၏စာသားကို ပထမအကြိမ်သာ တည်းဖြတ်နိုင်မည်ဖြစ်သည်။ ပထမအကြိမ် တည်းဖြတ်ပြီးနောက် စာပိုဒ်၏စာသားကို နောက်တစ်ကြိမ် နှိပ်လိုက်သည့်အခါ ဘာမှဖြစ်မလာတော့ပါ။

အကြောင်းမှာ input ပေါ်လာသည့်အချိန်တွင် အထက်တွင်ရှင်းပြခဲ့သော အကြောင်းရင်းများကြောင့် event ကို စာပိုဒ်မှ ဖြုတ်ထားလိုက်သောကြောင့် ဖြစ်သည်။ ယခု ကျွန်ုပ်တို့လိုအပ်သည်မှာ တည်းဖြတ်မှု ပြီးဆုံးသည့်အချိန်တွင် event ကို ပြန်၍ ချိတ်ဆက်ပေးရန် ဖြစ်သည်။

ဤအတိုင်း ပြုလုပ်ကြပါစို့။

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); // event ကို ပြန်ချိတ်ပါမည်
  });
  
  elem.removeEventListener('click', func);
});