HTML contenteditable অ্যাট্রিবিউট

HTML contenteditable অ্যাট্রিবিউট

contenteditable একটি গ্লোবাল অ্যাট্রিবিউট যা যেকোনো HTML এলিমেন্টে ব্যবহার করা যায়। এটি বুলিয়ান মান (true বা false) নেয় এবং নির্দেশ করে যে এলিমেন্টের কন্টেন্ট ব্যবহারকারী দ্বারা এডিট করা যাবে কিনা।

সিনট্যাক্স

<element contenteditable="true | false">

উদাহরণ

<!DOCTYPE html>
<html>
<body>
  <h2 contenteditable="true">ডেমো হেডিং</h2>
  <p contenteditable="true">এটি একটি ডেমো লাইন।</p>
</body>
</html>

আউটপুট

ব্যবহারকারী সরাসরি ব্রাউজারে হেডিং ও টেক্সট এডিট করতে পারে:

ব্যাখ্যা

<h2 contenteditable="true">Demo Heading</h2>
<p contenteditable="true">This is a demo line.</p>

contenteditable="true" সেট করলে এলিমেন্টটি এডিটেবল হয়ে যায়।

contenteditable মানসমূহ

JavaScript-এ ব্যবহার

const editable = document.querySelector('[contenteditable="true"]');
// কন্টেন্ট পাওয়া
console.log(editable.innerText); // বা innerHTML
// ইভেন্ট লিসেন
editable.addEventListener('input', (e) => {
  console.log('কন্টেন্ট পরিবর্তিত:', e.target.innerText);
});

ব্যবহারের ক্ষেত্রসমূহ

• WYSIWYG এডিটর (Rich text editor)
• ইনলাইন এডিটিং (টেবিল সেল, প্রোফাইল নাম ইত্যাদি)
• নোট-টেকিং অ্যাপ, CMS এডিটিং

সিকিউরিটি সতর্কতা