آموزش ویژگی isContentEditable در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی isContentEditable در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی isContentEditable در DOM جاوااسکریپت
با استفاده از ویژگی isContentEditable
میتونیم وضعیت قابل ویرایش بودن محتوای یک عنصر رو چک کنیم و برگشت بدیم، یعنی در خروجی ۲ مقدار میتونه نمایش داده بشه، یا True یا False
اگه True بود یعنی بله اون عنصر محتواش قابل ویرایش می باشد و اگه False بود یعنی خیر اون عنصر محتواش قابل ویرایش نمی باشد.
مقدار برگشتی | برگشت یک مقدار بولی یا Boolean true : یعنی بله محتوای عنصر قابل ویرایش است false : یعنی خیر محتوای عنصر قابل ویرایش نیست |
---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : چک کردن وضعیت قابل ویرایش بودن محتوای یک عنصر، با کلیک بروی دکمه “ست کردن” میتونیم عنصر رو قابل ویرایش کنیم و با کلیک بروی دکمه “دریافت وضعیت” میتونیم وضعیت قابل ویرایش بودن یک عنصر رو دریافت نماییم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> function set(){ var myp , result; myp = document.getElementById("MyP").contentEditable = true; result = document.getElementById("Result"); result.innerHTML = "الان عنصر قابل ویرایش است"; } function get(){ var myp , result; myp = document.getElementById("MyP").isContentEditable; result = document.getElementById("Result"); result.innerHTML = myp; } </script> |
مثال شماره ۲ : اول چک میکنیم ببینیم آیا عنصر قابل ویرایش می باشد یا خیر، اگه قابل ویرایش بود خب یک پیغام بده و بگه مثلا عنصر قابل ویرایش می باشد ولی اگه قابل ویرایش نبود میخوایم با استفاده از ویژگی contentEditable قابل ویرایشش کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> function get(){ var myp , result; myp = document.getElementById("MyP"); result = document.getElementById("Result"); if( myp.isContentEditable == true ){ result.innerHTML = "در حال حاضر عنصر قابل ویرایش است"; }else{ myp.contentEditable = true; result.innerHTML = "الان عنصر قابل ویرایش است"; } } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
isContentEditable | ۴ | ۴ | ۱۲٫۱ | ۳٫۱ | ۶ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
1 |
Element.isContentEditable; |
Free-Learn
نکات و توضیحات
- با استفاده از ویژگی isContentEditable میتونیم وضعیت قابل ویرایش بودن محتوای یک عنصر رو چک کنیم و با استفاده از ویژگی contentEditable میتونیم تنظیم کنیم که آیا یک عنصر قابل ویرایش باشد یا خیر.