JavaScript ဖြင့် တစ်ခုတည်းသော အစိတ်အပိုင်းကို တည်းဖြတ်ခြင်း
ယခု ကျွန်ုပ်တို့သည် စာသားများကို input fields များကို အသုံးပြု၍ အစိတ်အပိုင်းများ၏ စာသားများကို တည်းဖြတ်နည်းကို သင်ယူပါမည်။ ရိုးရှင်းသောအရာများမှ စတင်၍ တဖြည်းဖြည်း ရှုပ်ထွေးလာအောင် လုပ်သွားပါမည်။
ဒါကြောင့်၊ ကျွန်ုပ်တို့တွင် စာပိုဒ်တစ်ခုနှင့် input တစ်ခုရှိပြီး ၎င်းတို့သည် တစ်ခုတည်းသော မိဘအတွင်း တည်ရှိကြသည်ဆိုပါစို့။
<div id="parent">
<p id="elem">text</p>
<input id="input">
</div>
Input အတွင်း focus ပျောက်သွားသောအခါ ၎င်း၏စာသားသည် စာပိုဒ်အတွင်းပေါ်လာရန် လုပ်ကြည့်ရအောင်။
let elem = document.querySelector('#elem');
let input = document.querySelector('#input');
input.addEventListener('blur', function() {
elem.textContent = this.value;
});
ယခု စာမျက်နှာသို့ဝင်ရောက်သည်နှင့် input ထဲတွင် စာပိုဒ်၏စာသားရှိနှင့်ပြီးသားဖြစ်အောင် လုပ်ကြည့်ရအောင်။ ဤနည်းဖြင့် ကျွန်ုပ်တို့သည် input ကို အသုံးပြု၍ စာပိုဒ်အတွင်းရှိ စာသားကို တည်းဖြတ်နိုင်မည်ဖြစ်သည်။
အကောင်အထည်ဖော်ကြည့်ရအောင်။
let elem = document.querySelector('#elem');
let input = document.querySelector('#input');
input.value = elem.textContent; // input ထဲသို့ စာပိုဒ်၏စာသားကို ရေးသားခြင်း
input.addEventListener('blur', function() {
elem.textContent = this.value;
});
အထက်ပါကုဒ်ကို စာပိုဒ်၏စာသားသည် input အတွင်း focus ပျောက်သွားသောအခါမဟုတ်ဘဲ input အတွင်း စာသားရိုက်ထည့်သည်နှင့်အမျှ ပြောင်းလဲသွားစေရန် ပြုပြင်မွမ်းမံပါ။
Input ၏ပေါ်လာခြင်း
ယခု စာမျက်နှာပေါ်တွင် ကနဦး input မရှိဘဲ ၎င်းသည် စာပိုဒ်ကို ကလစ်နှိပ်သောအခါမှသာ ပေါ်လာစေရန် လုပ်ကြည့်ရအောင်။ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့၏ ကနဦး HTML သည် အောက်ပါအတိုင်းဖြစ်လိမ့်မည်။
<div id="parent">
<p id="elem">text</p>
</div>
ပထမဦးစွာ တည်းဖြတ်ခြင်းမပါဘဲ input ပေါ်လာခြင်းကိုသာ အကောင်အထည်ဖော်ကြည့်ရအောင်။
let elem = document.querySelector('#elem');
elem.addEventListener('click', function() {
let input = document.createElement('input');
input.value = elem.textContent;
elem.parentElement.appendChild(input);
});
ယခု input အတွင်း focus ပျောက်သွားသောအခါ စာပိုဒ်၏စာသား ပြောင်းလဲသွားစေရန် လုပ်ကြည့်ရအောင်။
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);
});
သို့သော် ကျွန်ုပ်တို့၏ကုဒ်သည် မပြည့်စုံသေးပါ။ အဘယ်ကြောင့်ဆိုသော် စာပိုဒ်ကို နှိပ်လိုက်တိုင်း input အသစ်တစ်ခု ပေါ်လာမည်ဖြစ်သောကြောင့်ဖြစ်သည်။
ဤပြဿနာကို ဖြေရှင်းရန် focus ပျောက်သွားသောအခါတိုင်း လက်ရှိ 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(); // input ကို ဖျက်ပါမည်
});
elem.parentElement.appendChild(input);
});
ကိုယ်တိုင်၊ ကျွန်ုပ်၏ကုဒ်ကို မကြည့်ဘဲ၊ ဖော်ပြထားသော အလုပ်ကို ဖြေရှင်းပါ။
