تاريخ النشر: 20 آذار (مارس) 2025
عندما تريد السماح للمستخدم بإدخال معلومات نصية عاديّة، قد يكون ردّ فعلك الأوّلي هو استخدام <textarea>. يناسب هذا الإجراء العديد من الحالات ولا يتطلّب أي جهد خاص لاستخدامه مع النماذج، ولكنّه يفرض أيضًا بعض القيود.
ومن الأمثلة على ذلك زيادة <textarea> ديناميكيًا مع المحتوى بدون اللجوء إلى حيل. هناك field-sizing: content، ولكنّه متوافق مع عدد محدود من المتصفّحات. وهنا تأتي مجموعة قيم سمة contenteditable="plaintext-only". يمكنك إضافتها إلى العناصر العامة مثل <div>، وسيتولى العنصر تلقائيًا إعادة تغيير حجمها.
هناك قيد آخر وهو التصميم. توفّر واجهة برمجة التطبيقات CSS Custom Highlight API آلية لتحديد نمط نطاقات نصية عشوائية في مستند باستخدام JavaScript لإنشاء النطاقات وCSS لتحديد أسلوبها. يستخدم <textarea> <div> داخليًا في جذر الظل لوكيل المستخدم، ولهذا السبب لا يعمل وضع تنسيق على النص باستخدام واجهة برمجة التطبيقات CSS Custom Highlight API. إذا تم استخدامها على عنصر مثل <div> مباشرةً الذي أنشأته contenteditable، تعمل واجهة برمجة التطبيقات CSS Custom Highlight 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> العامَين منمّق.
