JavaScript ဖြင့် တစ်ခုတည်းသော အစိတ်အပိုင်းကို တည်းဖြတ်ခြင်း

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

ဒါကြောင့်၊ ကျွန်ုပ်တို့တွင် စာပိုဒ်တစ်ခုနှင့် input တစ်ခုရှိပြီး ၎င်းတို့သည် တစ်ခုတည်းသော မိဘအတွင်း တည်ရှိကြသည်ဆိုပါစို့။

html<div id="parent">
  <p id="elem">text</p>
  <input id="input">
</div>

Input အတွင်း focus ပျောက်သွားသောအခါ ၎င်း၏စာသားသည် စာပိုဒ်အတွင်းပေါ်လာရန် လုပ်ကြည့်ရအောင်။

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

input.addEventListener('blur', function() {
  elem.textContent = this.value;
});

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

အကောင်အထည်ဖော်ကြည့်ရအောင်။

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

input.value = elem.textContent; // input ထဲသို့ စာပိုဒ်၏စာသားကို ရေးသားခြင်း

input.addEventListener('blur', function() {
  elem.textContent = this.value;
});

Input ၏ပေါ်လာခြင်း

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

html<div id="parent">
  <p id="elem">text</p>
</div>

ပထမဦးစွာ တည်းဖြတ်ခြင်းမပါဘဲ input ပေါ်လာခြင်းကိုသာ အကောင်အထည်ဖော်ကြည့်ရအောင်။

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

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

ယခု input အတွင်း focus ပျောက်သွားသောအခါ စာပိုဒ်၏စာသား ပြောင်းလဲသွားစေရန် လုပ်ကြည့်ရအောင်။

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

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

ဤပြဿနာကို ဖြေရှင်းရန် focus ပျောက်သွားသောအခါတိုင်း လက်ရှိ input ကို ဖျက်လိုက်ပါမည်။

javascriptlet 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(); // input ကို ဖျက်ပါမည်
  });
  
  elem.parentElement.appendChild(input);
});