JavaScript මගින් මූලද්රව්ය සංස්කරණය කිරීමේදී පෙළ සැඟවීම
දැන් අපි සංස්කරණය ආරම්භ කරන විට එම ඡේදයේම පෙළ වෙනුවට input ක්ෂේත්රය දිස්වන පරිදි සකසමු. පසුව සංස්කරණය අවසන් වූ විට input ක්ෂේත්රය ඉවත් කර, ඒ වෙනුවට නැවතත් ඡේදයේ පෙළ දිස්වනු ඇත.
දැන් අපි ක්රියාත්මක කිරීම ආරම්භ කරමු.
පළමුවෙන්ම, ඡේදය මත ක්ලික් කළ විට එහි අවසානයට එම ඡේදයේ පෙළ සහිත input ක්ෂේත්රයක් එකතු කරන පරිදි සකසමු:
let 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 ක්ෂේත්රය මත ක්ලික් කිරීම සරලවම ඉහළට එම ඡේදය වෙත ගමන් කරනු ඇත.
මෙය ඇති වන්නේ, පළමු input ක්ෂේත්රය දිස්වූ පසු සංස්කරණය ආරම්භ කිරීම සඳහා එය මත ක්ලික් කිරීමට උත්සාහ කරන විට, අපි ස්වයංක්රීයව ඡේදය මත ක්ලික් කරන අතර එයින් ඇතිවිය හැකි සියලු ප්රතිවිපාක සමඟින් ය.
ඉතින්, ගැටලුව විස්තර කර ඇත. දැන් අපි එය නිවැරදි කරමු.
මෙය සඳහා, input ක්ෂේත්රය දිස්වූ විට සරලවම ඡේදයෙන් ක්ලික් කිරීමේ හසුරුවාව ඉවත් කරමු. මෙම අවස්ථාවේදී ඡේදය මත ක්ලික් කිරීම පළමු වතාවට පමණක් input ක්ෂේත්රය දිස්වීමට හේතු වනු ඇත, ඉන් පසුව කරන ලද අනෙකුත් ක්ලික් කිරීම් input ක්ෂේත්රය දිස්වූ පසු නොසලකා හරිනු ලැබේ.
අපි දැන් ක්රියාත්මක කරමු:
let 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); // හසුරුවාව ඉවත් කරමු
});
දැන් අපි input ක්ෂේත්රය දිස්වන විට, ඡේදයේ පෙළ
අතුරුදහන් වන පරිදි සකසමු. මෙය සඳහා input ක්ෂේත්රය
ඇතුල් කිරීමට පෙර ඡේදයේ textContent හිස්
තන්තුවකට පවරමු:
let 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 ක්ෂේත්රයේ පෙළ ඡේදයට ලියා ඇති පරිදි සකසමු:
let 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 ක්ෂේත්රය දිස්වන මොහොතේ ඉහත විස්තර කර ඇති හේතු නිසා අපි හසුරුවාව ඡේදයෙන් ඉවත් කළෙමු. දැන් අපට සංස්කරණය අවසන් වන මොහොතේ හසුරුවාව නැවත අමුණා ගත යුතුය.
අපි මෙය කරමු:
let 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);
});
ස්වාධීනව, මගේ කේතය දෙස නොබලා, විස්තර කර ඇති කාර්යය විසඳන්න.
