জাভাস্ক্রিপ্টে পৃথক উপাদান সম্পাদনা

এখন আমরা ইনপুট ক্ষেত্র ব্যবহার করে উপাদানের পাঠ্য সম্পাদনা করতে শিখব। আমরা সহজ জিনিস দিয়ে শুরু করব এবং ধীরে ধীরে জটিলতা বাড়াব।

সুতরাং, আমাদের কাছে একটি অনুচ্ছেদ এবং একটি ইনপুট দেওয়া আছে, যা একটি অভিভাবকের মধ্যে অবস্থিত:

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

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

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

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

এখন আসুন এমন করি যাতে পৃষ্ঠায় প্রবেশ করার সময় ইনপুটে ইতিমধ্যেই অনুচ্ছেদের পাঠ্য থাকে। এইভাবে আমরা ইনপুট ব্যবহার করে অনুচ্ছেদে অবস্থিত পাঠ্য সম্পাদনা করতে সক্ষম হব।

বাস্তবায়ন করা যাক:

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

input.value = elem.textContent; // ইনপুটে অনুচ্ছেদের পাঠ্য লিখি

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

উপরের কোডটি এমনভাবে পরিবর্তন করুন যাতে অনুচ্ছেদের পাঠ্য ফোকাস হারানোর পরিবর্তে, ইনপুটে পাঠ্য打入的 সাথে সাথে পরিবর্তিত হয়।

ইনপুটের উপস্থিতি

এখন আসুন এমন করি যাতে প্রাথমিকভাবে পৃষ্ঠায় কোন ইনপুট না থাকে, বরং এটি অনুচ্ছেদে ক্লিক করলে প্রকাশিত হয়। অর্থাৎ আমাদের প্রারম্ভিক HTMLটি এইরকম দেখাবে:

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

প্রথমে শুধু ইনপুটের উপস্থিতি বাস্তবায়ন করি, সম্পাদনা ছাড়াই:

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

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.parentElement.appendChild(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;
	});
	
	elem.parentElement.appendChild(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(); // ইনপুট মুছে ফেলব
	});
	
	elem.parentElement.appendChild(input);
});

স্বাধীনভাবে, আমার কোডে না তাকিয়ে, বর্ণিত কাজটি সমাধান করুন।