این آموزش در تاریخ ۱۴۰۱/۰۵/۰۸ آپدیت شده است.
آموزش ویژگی contentEditable در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی contentEditable در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی contentEditable در DOM جاوااسکریپت
با استفاده از ویژگی contentEditable هم میتونیم وضعیت قابل ویرایش بودن یک تگ رو دریافت نماییم و هم میتونیم تنظیم کنیم که آیا محتوای یک تگ قابل ویرایش باشد یا خیر.
| مقدار برگشتی | inherit : یعنی تگ والد / پدر قابل ویرایش می باشد true : یعنی بله محتوای خوده تگ قابل ویرایش می باشد false : یعنی خیر محتوای خوده تگ قابل ویرایش نیست |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : در مثال زیر با استفاده از صفت عمومی contenteditable اومدیم و تگ رو قابل ویرایش کردیم بعدش اومدیم و با استفاده از جاوا اسکریپت وضعیت رو دریافت کردیم، پس باید در خروجی true چاپ بشه
|
1 2 3 4 5 6 7 |
<script> function Get(){ Result.innerHTML = MyTag.contentEditable; } </script> |
مثال شماره ۲ : میخوایم با کلیک بروی یک دکمه، یک تگ رو قابل ویرایش کنیم.
|
1 2 3 4 5 6 7 |
<script> function Set(){ MyTag.contentEditable = true; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| contentEditable | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
- برای گرفتن وضعیت
|
1 |
Element.contentEditable; |
- برای ست / تنظیم کردن وضعیت جدید
|
1 2 3 |
Element.contentEditable = true; یا Element.contentEditable = false; |
Free-Learn
نکات و توضیحات
- در زبان HTML یک صفت داریم به اسم contenteditable که با استفاده از این صفت نیز میتونیم مشخص و یا تعریف کنیم که آیا محتوای یک تگ قابل ویرایش باشه یا خیر.
