জাভাস্ক্রিপ্টে এলিমেন্ট সম্পাদনা করার সময় টেক্সট লুকানো

এখন আসুন আমরা এটি এমনভাবে করি যাতে সম্পাদনা করার সময় ইনপুটটি সেই অনুচ্ছেদের মধ্যেই উপস্থিত হয় - অনুচ্ছেদের টেক্সটের পরিবর্তে। তারপর যখন সম্পাদনা শেষ হবে ইনপুটটি সরিয়ে দেওয়া হোক, এবং তার পরিবর্তে আবার অনুচ্ছেদের টেক্সট উপস্থিত হোক।

আসুন বাস্তবায়নে এগিয়ে যাই।

শুরুতে, আসুন আমরা এটি করি যাতে অনুচ্ছেদে ক্লিক করলে তার শেষে একটি ইনপুট যোগ হয় যাতে সেই অনুচ্ছেদের টেক্সট থাকে:

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

elem.addEventListener('click', function() {
  let input = document.createElement('input');
  input.value = elem.textContent;
  
  elem.appendChild(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); // ইভেন্টটি বিচ্ছিন্ন করি
});

এখন আসুন আমরা এটি করি যাতে ইনপুটটি উপস্থিত হওয়ার সময়, অনুচ্ছেদের নিজের টেক্সটটি অদৃশ্য হয়ে যায়। এটি করার জন্য ইনপুট সন্নিবেশ করার আগে textContent অনুচ্ছেদের একটি খালি স্ট্রিংয়ে নির্ধারণ করি:

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

elem.addEventListener('click', function func() {
  let input = document.createElement('input');
  
  input.value = elem.textContent; // প্রথমে ইনপুটে অনুচ্ছেদের টেক্সট লিখি
  elem.textContent = ''; // তারপর অনুচ্ছেদের টেক্সট সরাই
  elem.appendChild(input); // তারপর ইনপুটটি সন্নিবেশ করি
  
  elem.removeEventListener('click', func);
});

এখন আসুন আমরা এটি করি যাতে ইনপুটে ফোকাস হারানোর সময় সেই ইনপুটের টেক্সট অনুচ্ছেদে লেখা হয়:

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

লক্ষ্য করুন যে আমাদের ইনপুটটি মুছে ফেলার প্রয়োজন নেই - এটি নিজেই নিজেকে মুছে ফেলে, যখন এটি তার টেক্সট অনুচ্ছেদে লেখে: কারণ ইনপুট অনুচ্ছেদের টেক্সটের অংশ, তাই কোনো টেক্সট এই অনুচ্ছেদে লেখা সহজভাবে আমাদের ইনপুটটি মুছে দেয়, এবং সব।

যাইহোক, আমাদের আরও একটি সমস্যা রয়েছে: অনুচ্ছেদের টেক্সট শুধুমাত্র প্রথম বার সম্পাদনা করা হবে। প্রথম সম্পাদনার পরে, অনুচ্ছেদের টেক্সটে পুনরায় ক্লিক করলে কোনো ফলাফল হবে না।

কারণ হলো যে ইনপুটটি উপস্থিত হওয়ার মুহূর্তে আমরা উপরে বর্ণিত কারণে অনুচ্ছেদ থেকে ইভেন্টটি বিচ্ছিন্ন করেছিলাম। এখন আমাদের প্রয়োজন মুহূর্তে সম্পাদনা শেষ হওয়ার সাথে সাথে ইভেন্টটি পুনরায় সংযুক্ত করা।

আসুন এটি করি:

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); // ইভেন্টটি পুনরায় সংযুক্ত করি
  });
  
  elem.removeEventListener('click', func);
});