Javascript event.preventDefault fonksiyonu ve kullanımı - Türkiye'nin En Ortam Bilgi Paylaşım Platformu

Etkenblog · 27-11-2013, 17:41

FONT="Verdana"]
Bu fonksiyon çağrıldığında oluşan eventin işlevini geçersiz kılar.
Örneğin bir linke tıkladığınızdaki click eventini, formu submit ettiğimizde onsubmit eventini preventDefault metodunu kullanarak geçersiz kılabiliriz.Örnek olarak bir kaç kod yazalım.[/FONT]

HTML-Kodu:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
function engelle(e){

e.preventDefault();

}
</script>

</head>
<body>
<a href="http://www.bilisimturk.org" onclick="engelle(event)">
Tıkla
</a>
</body>

Burada a tagine tıkladığımızda href özelliğindeki adrese gitmeyecek.Çünkü preventDefault fonksiyonu eventin işlevini geçersiz kıldı.

İşleri daha da karmaşık hala getirelim.Mesela ziyaretçiden sadece telefon numarası gibi rakamların oldugu bir text almak istiyorsunuz ve kullanıcının sadece rakam girmesini istiyorsunuz.Bunun için preventDefault işimize çok yarayacak.Kod üzerinde anlatalım.

HTML-Kodu:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
function sadeceRakam(e){
if(e.keyCode>=58 || e.keyCode<=47)
   e.preventDefault();

}
</script>
</head>
<body>
<input type="text" onkeypress="sadeceRakam(event)" placeholder="Veriler Buraya">
</body>
</html>

Yukarıdaki kodda dedik ki kullanıcı bir tuşa bassın.Sonra bu tuşun ascii kodu 48 ve 57 arasında değilse preventDefault() metodunu çalıştır.48 ve 57 0 dan 9 a kadar olan rakamların ascii kodlarıdır.
Karakterlerin ascii kodlarına şu adresten erişebilirsiniz.
Peki neden onkeyup değilde onkeypress kullandık ?
Çünkü keyup tuşa basılıp bırakıldıktan sonra tetiklenir.Keypress ise basıldığı anda tetiklenir.

Online görün

Kaynak

27-11-2013, 17:41	#1
Etkenblog Üyelik tarihi: 11-09-2012 Mesajlar: 100 Konuları: 100 WEB Sitesi: İlgi Alanı: Aldığı Teşekkür: Ettiği Teşekkür: WF Ticaret Sayısı: (0) WF Ticaret Yüzdesi:(%) WF Puanı: 12	Javascript event.preventDefault fonksiyonu ve kullanımı FONT="Verdana"] Bu fonksiyon çağrıldığında oluşan eventin işlevini geçersiz kılar. Örneğin bir linke tıkladığınızdaki click eventini, formu submit ettiğimizde onsubmit eventini preventDefault metodunu kullanarak geçersiz kılabiliriz.Örnek olarak bir kaç kod yazalım.[/FONT] HTML-Kodu: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> function engelle(e){ e.preventDefault(); } </script> </head> <body> <a href="http://www.bilisimturk.org" onclick="engelle(event)"> Tıkla </a> </body> Burada a tagine tıkladığımızda href özelliğindeki adrese gitmeyecek.Çünkü preventDefault fonksiyonu eventin işlevini geçersiz kıldı. İşleri daha da karmaşık hala getirelim.Mesela ziyaretçiden sadece telefon numarası gibi rakamların oldugu bir text almak istiyorsunuz ve kullanıcının sadece rakam girmesini istiyorsunuz.Bunun için preventDefault işimize çok yarayacak.Kod üzerinde anlatalım. HTML-Kodu: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> function sadeceRakam(e){ if(e.keyCode>=58 \|\| e.keyCode<=47) e.preventDefault(); } </script> </head> <body> <input type="text" onkeypress="sadeceRakam(event)" placeholder="Veriler Buraya"> </body> </html> Yukarıdaki kodda dedik ki kullanıcı bir tuşa bassın.Sonra bu tuşun ascii kodu 48 ve 57 arasında değilse preventDefault() metodunu çalıştır.48 ve 57 0 dan 9 a kadar olan rakamların ascii kodlarıdır. Karakterlerin ascii kodlarına şu adresten erişebilirsiniz. Peki neden onkeyup değilde onkeypress kullandık ? Çünkü keyup tuşa basılıp bırakıldıktan sonra tetiklenir.Keypress ise basıldığı anda tetiklenir. Online görün Kaynak
	Alıntı

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)