Bu makalede, JavaScript'te içerik düzenlenebilir değişiklik olaylarının nasıl ele alınacağı anlatılmakta ve bir örnek yardımıyla açıklanmaktadır.
JavaScript'te İçerik Düzenlenebilir Değişiklik Olayları Nasıl Ele Alınır?
Contenteditable, numaralandırılmış bir özelliktir. Kullanıcı kendi gereksinimleri doğrultusunda içerikte değişiklik yapabilir. İzin veriliyorsa tarayıcı, öğelerin değiştirilmesine izin verecek şekilde widget'ını değiştirir.
İçerik düzenlenebilir bir Değişiklik Etkinliğinde Hangi Değerlere İzin Verilir?
İçerik düzenlenebilir bu değerlerden herhangi birini alabilir:
- Yalnızca düz metin, zengin metin biçimlendirmesi devre dışı bırakılsa bile orijinal metnin düzenlenebileceğini temsil eder.
- Boş bir dize veya true; bu, öğenin düzenlenebileceği anlamına gelir.
- false, öğenin düzenlenemeyeceğini ima eder.
Örnek
Aşağıdaki örnek, düzenlenebilir içeriğin bir web sayfasında nasıl kullanılabileceğini açıklamaktadır. Daha iyi anlamak için aşağıdaki koda bakalım:
HTML'
İçeriği düzenlenebilir değişiklik olaylarının kullanımını açıklayan bir HTML kodu aşağıda verilmiştir:
< blok alıntı içeriği düzenlenebilir = 'doğru' >
< h3 > İÇERİĞİNİZİ BURADA DÜZENLEYİN! < / h3 >
< / blok alıntı >
Yukarıdaki HTML kodunda:
- contenteditable özelliği true olarak ayarlandığında bir Blockquote etiketi oluşturulur. Bu, blokquote etiketinin içindeki içeriğin düzenlenmesini sağlayacaktır.
- Blockquote etiketinin içinde bir h3 etiketi bulunur.
içerisinde yer aldığından “İÇERİĞİNİZİ BURADA DÜZENLEYİN!” yazıyor, bu da içeriğin kullanıcı tarafından düzenlenebileceği anlamına geliyor.
CSS
Kodumuzu görsel olarak çekici kılmak için aşağıdaki CSS kodunu kullandık:
blok alıntı {
arka plan : şeftali pufu ;
sınır yarıçapı : 10 piksel ;
marj : 10 piksel ;
}
blok alıntı h3 {
dolgu malzemesi : 10 piksel ;
}
Yukarıdaki CSS kodunda:
- Blockquote etiketinin arka planı, kenar yarıçapı 10 piksel ve kenar boşluğu 10 piksel olan şeftali rengine sahip olacak şekilde ayarlanmıştır.
- Blok alıntının içindeki h3 başlığı 10 piksellik bir dolguya sahip olacak şekilde ayarlanmıştır.
Çıktı :
Aşağıdaki çıktı, JavaScript'teki contenteditable change olayı kullanılarak içeriğin nasıl düzenlenebileceğini açıklamaktadır:
İçeriği Düzenlemenin Önemi
- Kullanıcının içeriği rahatça değiştirebilmesi nedeniyle artan etkileşim.
- Bir programcı olarak JavaScript yardımıyla uygun özelleştirme, otomatik kaydetme gibi değiştirilmiş davranışlar oluşturabilir ve kullanıcı girişine göre farklı eylemleri tetikleyebilir.
- Kullanıcının ayrı bir metin alanına ihtiyaç duymadan dinamik olarak düzenleme yapmasına olanak tanıyarak düzenleme sürecini kolaylaştırmaya yardımcı olur.
Çözüm
JavaScript'teki içerik düzenlenebilir değişiklik olayları, kullanıcının web sayfasını duyarlı ve özelleştirilebilir hale getirerek içeriği değiştirmesine olanak tanır. Bu, kullanıcının bir web sayfasındaki içeriği gerçek zamanlı olarak düzenleyebildiği ve daha duyarlı bir kullanıcı deneyimi sağlayan kullanıcı merkezli web geliştirmenin yolunu açıyor. Bu makalede, JavaScript'te içerik düzenlenebilir değişiklik olaylarının nasıl ele alınacağı tartışılmış ve bir örnek yardımıyla açıklanmıştır.