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

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

توسط

۱۴۰۰-۰۲-۳۰

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

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

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

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی isContentEditable در DOM جاوااسکریپت
2 مثال از این ویژگی
3 پشتیبانی مرورگرها
4 شکل نوشتاری
5 نکات و توضیحات

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

با استفاده از ویژگی isContentEditable میتونیم وضعیت قابل ویرایش بودن محتوای یک عنصر رو چک کنیم و برگشت بدیم، یعنی در خروجی ۲ مقدار میتونه نمایش داده بشه، یا True یا False

اگه True بود یعنی بله اون عنصر محتواش قابل ویرایش می باشد و اگه False بود یعنی خیر اون عنصر محتواش قابل ویرایش نمی باشد.

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

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

Free-Learn

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

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

مثال شماره ۱ : چک کردن وضعیت قابل ویرایش بودن محتوای یک عنصر، با کلیک بروی دکمه “ست کردن” میتونیم عنصر رو قابل ویرایش کنیم و با کلیک بروی دکمه “دریافت وضعیت” میتونیم وضعیت قابل ویرایش بودن یک عنصر رو دریافت نماییم.

<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>

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 قابل ویرایشش کنیم.

<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>

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) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

Element.isContentEditable;

1	Element.isContentEditable;

Free-Learn

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

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

Free-Learn

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