বিষয়বস্তু সম্পাদনাযোগ্য "শুধুমাত্র-পাঠ্য" বৈশিষ্ট্য মান সমন্বয় এখন বেসলাইন নতুনভাবে উপলব্ধ

Thomas Steiner

প্রকাশিত: মার্চ 20, 2025

উদযাপন: এই ওয়েব বৈশিষ্ট্যটি এখন তিনটি প্রধান ব্রাউজার ইঞ্জিনেই উপলব্ধ, এবং 4 মার্চ, 2025 থেকে নতুনভাবে উপলব্ধ বেসলাইনে পরিণত হয়েছে৷

আপনি যখন ব্যবহারকারীকে প্লেইনটেক্সট তথ্য প্রবেশ করার অনুমতি দিতে চান, তখন আপনার প্রথম প্রবৃত্তি হতে পারে একটি <textarea> এর জন্য পৌঁছানো। এটি অনেক ক্ষেত্রে কাজ করে এবং এটি ফর্মের সাথে কাজ করার জন্য কোন বিশেষ প্রচেষ্টার প্রয়োজন নেই, তবে এর সীমাবদ্ধতাও রয়েছে৷

একটি উদাহরণ হল হ্যাকের সমাধান না করেই বিষয়বস্তুর সাথে <textarea> গতিশীলভাবে বৃদ্ধি করা। field-sizing: content , তবে এটিতে সীমিত ব্রাউজার সমর্থন রয়েছে। এখানেই contenteditable="plaintext-only" অ্যাট্রিবিউট ভ্যালু কম্বিনেশন আসে। আপনি এটিকে <div> মত জেনেরিক এলিমেন্টে যোগ করতে পারেন এবং এলিমেন্টটি স্বয়ংক্রিয়ভাবে রিসাইজ করার যত্ন নিতে পারেন।

আরেকটি সীমাবদ্ধতা হল স্টাইলিং। CSS কাস্টম হাইলাইট API রেঞ্জ তৈরি করতে জাভাস্ক্রিপ্ট ব্যবহার করে নথিতে নির্বিচারে পাঠ্য রেঞ্জ স্টাইল করার জন্য একটি প্রক্রিয়া প্রদান করে এবং CSS তাদের স্টাইল করার জন্য। একটি <textarea> অভ্যন্তরীণভাবে ইউজার এজেন্ট শ্যাডো রুটে একটি <div> ব্যবহার করে, যে কারণে CSS কাস্টম হাইলাইট API দিয়ে টেক্সট স্টাইল করা কাজ করে না। যদি সরাসরি <div> এর মতো একটি উপাদানে ব্যবহার করা হয় যা আপনি contenteditable করেছেন, CSS কাস্টম হাইলাইট API ঠিক কাজ করে।

<style>
  ::highlight(highlight) {
    background-color: yellow;
    color: black;
  }
</style>

<div contenteditable="plaintext-only">Edit me</div>

<script>
  const parentNode = document.querySelector('div').firstChild;
  const range = new Range();
  range.setStart(parentNode, 0);
  range.setEnd(parentNode, 3);
  const highlight = new Highlight(range);
  CSS.highlights.set('highlight', highlight);
</script>

এখানে ডেমোর একটি স্ক্রিনশট রয়েছে যা এই সীমাবদ্ধতা দেখায়। লক্ষ্য করুন কিভাবে <textarea> এ পাঠ্যটি স্টাইল করা হয় না, তবে দুটি contenteditable জেনেরিক <div> উপাদানের পাঠ্য।