Konuyu Değerlendir
  • 0 Oy - 0 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5
JavaScript ile Input Nesnesini Aktif Yapmak
#1
Web sayfası tasarlarken kullanıcıların siteyi kolayca kullanabilmelerine özellikle dikkat ederiz. Ziyaretçilere verilen hizmetler mümkün olduğunca pratik ve kolay kullanılır olmalı. İşlemler esnasında zaman kaybını en aza indirmeliyiz. Artık ziyaretçilerin en ufak bir gecikmeye ya da fazladan bir tıklamaya daha tahammülleri yok. UI/UX Tasarımıyla uğraşanlar, kullanıcı deneyimine kafa yoranlar dediklerime hak verecektir. Bu sefer kullanıcı girişi kısmı için kullanabileceğiniz basit bir Javascript uygulamasından bahsedeceğim.

Giriş formlarını hepniz bilirsiniz. Ziyaretçiye kullanıcı adı ve şifresi sorulur. Giriş formuna ziyaretçinin bilgilerini girebilmesi için önce input-text nesnesine tıklaması gerekir. tıklanan form nesneleri tarayıcı taraafından aktive edilir ve bu hareket bir odaklama olarak algılanır. Yani browser der ki kullanıcı form nesnesine tıkladı, oraya odaklandı. Bu durumda kullanıcı adının yazıldığı kutucukta bir kursor belirir. Sonrasında ziyaretçi bilgilerini girer. Bu olayın gerçekleşmesi için

1 - Sayfanın yüklenmesi
2- Ziyaretçinin giriş nesnesine tıklaması gerekir.

Bu iki adımlı işlemi küçük bir kod ile tek adıma düşürebiliriz. Kullanıcıya giriş sayfası yüklenir yüklenmezi kayıt formu sanki tıklanmış gibi aktif bir şekilde görüntülenebilir.

Javascript focus() fonksiyonu bunu sizin yerinize yapabilir.

Aşağıdaki basit kodu inceleyerek kendi sitenizde uygulayabilirsiniz.


Kod:
<!DOCTYPE html>
<html>
<head>
<title>Javascript ile input nesnesine focus yapmak</title>
</head>
<body>
<input type="text" name="kullaniciAdi" />
<input type="password" name="sifre" />
<input type="button"value="Giriş" />
<script type="text/javascript">
window.onload=function(){
document.getElementsByName("kullaniciAdi")[0].focus();
}
</script>

</body>
</html>


Bu basit kod örneğinde sayfa için yüklenme olayı window.onload fonksiyonu ile takip edilir. Fonksiyonun içindeki tek satırlık kod name özelliği kullanıcıAdi olan input nesnesine focus() fonksiyonunu uygular. Kullanıcı sayfa yüklendiğinde kullanıcı adı bölümünde kursörü yazım için hazır beklerken bulur.

Yorumlarınız ve Fikirleriniz Bizim İçin Önemlidir.
Bu dünya artık biraz daha güzel bir yer...
Bul
Alıntı


Foruma Git:


Bu konuyu görüntüleyen kullanıcı(lar): 1 Ziyaretçi