آموزش ویژگی isContentEditable در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی isContentEditable در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی isContentEditable در DOM جاوااسکریپت
با استفاده از ویژگی isContentEditable میتونیم وضعیت قابل ویرایش بودن محتوای یک عنصر رو چک کنیم و برگشت بدیم، یعنی در خروجی ۲ مقدار میتونه نمایش داده بشه، یا True یا False
اگه True بود یعنی بله اون عنصر محتواش قابل ویرایش می باشد و اگه False بود یعنی خیر اون عنصر محتواش قابل ویرایش نمی باشد.
با استفاد از ویژگی contentEditable نیز میتونیم تنظیم یا ست کنیم که آیا محتوای یک عنصر قابل ویرایش باشه یا خیر.
| مقدار برگشتی | برگشت یک مقدار بولی یا 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 میتونیم تنظیم کنیم که آیا یک عنصر قابل ویرایش باشد یا خیر.
