🌟  3 ) صفت عمومی contenteditable :


حتما تاکنون صفحات مختلفی را مشاهده کردید و متون زیادی را خواندید . اما اینکه یک متنی را در مرورگر بخواهید تغییر دهید شاید برایتان جدید باشد !


فرض کنید یک سایت ، پستی را منتشر کرده باشد و شما می خواهید یک کپی از آن بگیرید یا میخواهید آن پست را چاپ کنید ولی به نظرتان یک قسمت باید اصلاح شود یا حذف گردد و یا چیزی به آن اضافه گردد .


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


البته به این معنا نیست که در کل ، آن متن برای صفحه وب تغییر کند ، بلکه فقط برای ما تغییر می کند آن هم فقط تا قبل از لود جدید آن صفحه . یعنی اگر صفحه را دوباره لود کنیم ، تغییری که دادیم از بین می رود . پس دقت شود که فقط برای کپی ، چاپ و از این دست موارد کاربرد دارد .



🌟  صفتی که ما را قادر به استفاده از این قابلیت می کند ، صفت عمومی contenteditable می باشد .


<element contenteditable="true" >



🌟  این صفت دو مقدار می گیرد :


1 ) true : یعنی بشود محتوای این المان را تغییر داد .


2 ) false : یعنی نشود محتوای این المان را تغییر داد .


🌟  اگر این صفت برای المان اعمال نشده باشد ، المان از والد خود پیروی می کند .


<h1>
    <p>content</p>
</h1>


مثلا اگر برای المان p ، ست شود ، از h1 که والدش است ، تقلید می کند . یعنی اگر والد او این قابلیت را داشت ، او نیز خواهد داشت و اگر نداشت ، او نیز نخواهد داشت .


🌟  این صفت توسط همه ی مرورگرها پشتیبانی می شود .


🌟  این صفت در ورژن قبلی های html نبوده ، و در html5 اضافه شده است .


مثال عملی :


1 )  فایل html مثال قبل را در notepad باز کنید .  اکنون به المان body ، صفت contenteditable با مقدار true را اعمال کنید و ذخیره نمائید .


<body contenteditable="true" >content</body>

2 ) اکنون فایل html را با مرورگر باز می کنیم . می بینید که عبارت hello world را می توانیم تغییر دهیم . انگار داریم در word کار می کنیم !

برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.