تاریخ انتشار: 20 مارس 2025
هنگامی که می خواهید به کاربر اجازه دهید اطلاعات متن ساده را وارد کند، اولین غریزه شما ممکن است دستیابی به <textarea> باشد. این برای بسیاری از موارد کار می کند و نیازی به تلاش خاصی برای کارکرد با فرم ها ندارد، اما محدودیت هایی نیز دارد.
یک مثال رشد <textarea> به صورت پویا با محتوا بدون هک کردن است. field-sizing: content وجود دارد، اما از مرورگر پشتیبانی محدودی دارد. اینجاست که ترکیب مقدار مشخصه contenteditable="plaintext-only" وارد می‌شود. می‌توانید آن را به عناصر عمومی مانند <div> اضافه کنید و از عنصر بخواهید که به طور خودکار تغییر اندازه را انجام دهد.
محدودیت دیگر استایل است. CSS Custom Highlight API مکانیزمی را برای استایل دادن به محدوده‌های متن دلخواه روی یک سند با استفاده از جاوا اسکریپت برای ایجاد محدوده‌ها و 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> استایل بندی نمی شود، اما متن در دو عنصر کلی <div> contenteditable است.
