خاصیت contenteditable در HTML

خاصیت contenteditable در HTML مشخص می کند که آیا محتوای متنی درون یک عنصر قابل ویرایش هست یا خیر.

مثال

در مثال زیر ما خاصیت contenteditable برابر با true قرار داده ایم که در نتیجه می توانید محتوای متنی درون عنصر <p> را با کلیک برروی آن ویرایش کنید.

<p contenteditable="true">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>

تست آنلاین کد

تعریف و کاربرد

خاصیت contenteditable در HTML مشخص می کند که محتوای درون یک عنصر قابل ویرایش هست یا نه.

نکته: اگر صفت contenteditable روی عنصری تنظیم نشده باشد این خاصیت را از عناصر پدر به ارث می برد.

یعنی مثال ساده زیر را در نظر بگیرید:

<div contenteditable="true">
<p >لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
</div>

با اینکه صفت contenteditable روی تگ div تنظیم شده ولی عناصر والد یا فرزند خود را تحت تأثیر قرار می دهد و به نوعی این خاصیت روی آنها فعال می شود و در مثال بالا شما می توانید محتوای متنی درون تگ <p> را که فرزند تگ <div> هست تغییر بدید.

پشتیبانی مرورگر ها

اعداد موجود در جدول اولین نسخه مرورگر را که ویژگی را کاملاً پشتیبانی می کند مشخص می کند.

نحوه استفاده

<element contenteditable="true|false">

مقادیر خاصیت