Contenteditable Özniteliğini Kullanma
Metni, kullanıcılar tarafından düzenlenebilir bir web sitesinde yapmak, beklediğinizden daha kolaydır. HTML, bu amaç için bir özellik sağlar: contenteditable.
Contenteditable niteliği ilk olarak 2014 yılında HTML5 sürümü ile kullanıma sunuldu. Yönetilen içeriğin tarayıcıdaki bir site ziyaretçisi tarafından değiştirilip değiştirilemeyeceğini belirtir.
Contenteditable Özniteliği Desteği
En modern masaüstü tarayıcıları özelliği destekler.
Bunlar şunları içerir:
- Chrome 4.0 ve üstü
- Internet Explorer 6 ve üstü
- Firefox 3.5 ve üstü
- Safari 3.1 ve üstü
- Opera 10.1 ve üstü
- Microsoft Edge
Aynı şey çoğu mobil tarayıcı için de geçerlidir.
Contenteditable nasıl kullanılır
Özelliği, düzenlenebilir hale getirmek istediğiniz HTML öğesine ekleyin. Üç olası değeri vardır: doğru, yanlış ve miras. Devralma, varsayılan öğedir, yani öğenin kendi üst öğesinin değerini aldığı anlamına gelir. Benzer şekilde, yeni düzenlenebilir içeriğinizin alt öğelerinin her biri, değerlerini yanlış olarak değiştirmediğiniz sürece de düzenlenebilir. Örneğin, bir DIV öğesini düzenlenebilir yapmak için şunu kullanın:
Contenteditable ile Düzenlenebilir bir Yapılacaklar Listesi Oluşturun
Düzenlenebilir içerik, yerel depolama alanıyla eşleştirdiğinizde en anlamlı olanıdır, böylece içerik oturumlar ve site ziyaretleri arasında kalır.
- Sayfanızı bir HTML düzenleyicisinde açın.
- MyTasks adında bir madde işaretli, sırasız liste oluşturun :
- Bazı görevler
- Başka bir görev
- Bazı görevler
- Contenteditable özniteliğini
- öğesine ekleyin:
Artık düzenlenebilir bir yapılacaklar listesi var - ancak tarayıcınızı kapatır veya sayfayı terk ederseniz listeniz kaybolacaktır. Çözüm: Görevleri localStorage'a kaydetmek için basit bir komut dosyası ekleyin. - Belgenizin bölümünde jQuery'ye bir bağlantı ekleyin.