5.00 / 1 oy

HTML5'te Spellcheck Özelliğini Kullanmak

Bir yazar bugün HTML'de img loading="lazy" özelliği nasıl kullanılır? yazısı paylaşmış, altta kalmayalım yeni bir HTML özelliği de ben paylaşmış olayım dedim ve henüz tanışmamış olanlar için size HTML5'deki Spellcheck özelliğini tanıtmak istiyorum. İşlevi adından da anlaşılabileceği gibi HTML elementlerinde yazım denetimi yapmak amacıyla geliştirilmiş yeni bir özellik, bana sorarsanız neden bu kadar geç geldiğini anlamak bile zor.

spellcheck özelliği, parola yazdığımız password input'ları hariç diğer yazılabilir html input elementlerinde uygulanabiliyor. Benzer şekilde contenteditable özelliği eklenmiş html elementleri için de aşağıdaki gibi uygulanabiliyor. Sayfa ilk açıldığında hatalı kelimelerin altı çizilmiyor ise mouse ile bu input'a bir kere tıklayarak aktif duruma getirdiğinizde yazım denetimi hemen etkinleşiyor ve aşağıdaki gibi hatalı kelimelerin altı kırmızı ile çiziliyor.

<div lang="tr">
   <p contenteditable spellcheck="true">Bu yazı içinde kazara hatalı yazılmış kelimeler olabilir</p>
   <p contenteditable spellcheck="true" >Bu yzı içnde kazaara htalı yazılmıs kelımeler olabilır</p>
</div>

html spellcheck turkish

spellcheck özelliğini kullanmanın amacı, site ziyaretçilerinin yazı yazacakları düzenlenebilir yazı alanlarında hatalı yazılan kelimeleri göstermek olduğu için olabildiğince pratik bir şekilde kullanılabilir bir özellik. Peki tarayıcı kelimeleri hangi dile göre yazımlarını denetleyeceğini nereden bilecek? Bu sorunun yanıtı da lang özelliği ile bildirilen dil. Eğer html etikerinde lang="tr" bildirimi yaptıysanız tüm spellcheck alanlarında bu denetim Türkçe için yapılacaktır. Ya da yukarıda benim verdiğim örnekte olduğı gibi bazı div'ler için lang özelliğini override etmek de mümkün. Bu sayede tek bir sayfa içinde Türkçe, İngilizce, Fransızca vb. gibi dillerde spell check yapabilirsiniz.

 

mbologlu

18.01.2021 17:35

Bu soru 1 kez yanıtlandı.

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
HTML5'te Spellcheck Özelliğini Kullanmak

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.