JavaScript භාවිතයෙන් තනි මූලද්‍රව්‍යයක් සංස්කරණය කිරීම

දැන් අපි ආදාන ක්ෂේත්‍ර භාවිතයෙන් මූලද්‍රව්‍යවල පෙළ සංස්කරණය කරන්නේ කෙසේදැයි ඉගෙන ගනිමු. සරල දේවල් සිට ආරම්භ කර ක්‍රමයෙන් සංකීර්ණ කරමු.

එබැවින්, අපට එක් මූලික මූලද්‍රව්‍යයක ඇති ඡේදයක් සහ input ක්ෂේත්‍රයක් ලබා දී ඇතැයි සිතමු:

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

Input ක්ෂේත්‍රයේ අවධානය අහිමි වූ විට එහි පෙළ ඡේදය තුළ පෙනෙන පරිදි කරමු:

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 ක්ෂේත්‍රයේ අවධානය අහිමි වූ විට ඡේදයේ පෙළ වෙනස් වන පරිදි කරමු:

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 ක්ෂේත්‍රයක් පෙනෙන ආකාරයට හේතු වේ.

ගැටලුව විසඳීම සඳහා, අවධානය අහිමි වූ විට වත්මන් 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);
});