آموزش ویژگی contentEditable در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی contentEditable در DOM جاوااسکریپت با من همراه باشید.

ویژگی contentEditable در DOM جاوااسکریپت

Free-Learn

ویژگی contentEditable در DOM جاوااسکریپت

با استفاده از ویژگی contentEditable هم میتونیم وضعیت قابل ویرایش بودن محتوای یک عنصر رو دریافت نماییم و هم میتونیم تنظیم و یا مشخص کنیم که آیا محتوای یک عنصر قابل ویرایش باشد یا خیر.

با استفاده از ویژگی isContentEditable نیز میتونیم با استفاده از یک مقدار true یا false وضعیت قابل ویرایش بودن یک عنصر رو برگشت بدیم.

مقدار برگشتی یک رشته که نشان دهنده وضعیت قابل ویرایش بودن یک عنصر می باشد
inherit : یعنی عنصر والد یا پدر قابل ویرایش می باشد
true : یعنی بله خوده عنصر قابل ویرایش می باشد
false : یعنی خیر خوده عنصر قابل ویرایش نیست

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : دریافت وضعیت قابل ویرایش بودن یک عنصر ( در مثال زیر با استفاده از صفت عمومی contenteditable از قبل عنصر رو قابل ویرایش کردیم بعدش اومدیم و با استفاده از جاوااسکریپت وضعیت رو دریافت کردیم، پس باید در خروجی true چاپ بشه )

امتحان کنید

مثال شماره ۲ : میخوایم با کلیک بروی یک دکمه، یک عنصر رو قابل ویرایش کنیم.

امتحان کنید

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari IE
contentEditable ۱۱ ۳٫۵ ۱۰٫۶ ۳٫۲ ۶

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

  • برای گرفتن وضعیت

  • برای ست / تنظیم کردن وضعیت جدید


Free-Learn

نکات و توضیحات

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

Free-Learn

دریافت PDF یا پرینت این مطلب