Javascript İnput Olayları

Merhaba Arkadaşlar bu yazımda sizlere Javascript input olaylarını anlatacağım.

Bir önceki yazımda olaylardan biraz bahsetmiştim okuduysanız.

Bir form elemanının üzerine tıklandığında, içine girildiğinde gibi olaylardan sonra yapmasını istediğimiz şeyleri belirtmek için input olaylarını kullanırız.

onblur() Olayı

Bir kullanıcı bir inputun içinden çıktığında bu fonksiyon çalışır. Yani inputun içine bir şeyler yazıp sayfada herhangi bir boş alana tıkladığınızda ya da shift tuşuna bastığınızda çalışır.

<!DOCTYPE html>
<html>
<head>
<script>
// Bu fonksiyon içerisine parametre olarak girilen metnin tüm küçük harflerini büyük harfe döndürür
function harf_buyut() {
  var isim = document.getElementById("isim");
  isim.value = isim.value.toUpperCase();
}
</script>
</head>
<body>
İsminizi giriniz: <input type="text" id="isim" onblur="harf_buyut()"> 
<!-- Eğer inputun içine bir metin yazarsanız ve yazdıktan sonra sayfada herhangi bir boş alana tıklarsanız yazdığınız küçük karakterlerin hepsi büyük karaktere dönüşecektir.  -->
</body>
</html>

onChange Olayı

İnput içerisindeki değeri değiştiğinde yapmak istediğimiz değişiklikleri bu olay sayesinde yaparız.

<!DOCTYPE html>
<html>
<body>
<p>Nerelisiniz ?</p>
<select id="il" onchange="il()">
  <option value="ordu">Ordu</option>
  <option value="samsun">Samsun</option>
  <option value="trabzon">Trabzon</option>
  <option value="rize">Rize</option>
</select>
<p id="il_sonuc"></p>
<script>
function myFunction() {
  var x = document.getElementById("il").value;
  document.getElementById("il_sonuc").innerHTML = "Memleketiniz: " + x;
}
</script>
</body>
</html>
<!-- Bu kodu çalıştırdığınızda selectboxtan bir değer seçtiğiniz zaman ekranda memleketiniz: seçtiğiniz değer şeklinde bir yazı yazacaktır -->

onchange eventi hem selectbox hemde normal inputlar için kullanılabilir.

onfocus Olayı

Focuslamak lafını hepiniz muhtemelen duymuşsunuzdur :). Odaklanmak anlamına geliyor. Bir inputun içine girdiğiniz zaman direk onfocus olayı devreye girer.

<!DOCTYPE html>
<html>
<head>
<script>
function renk_degis(x) {
  x.style.background = "orange";
}
</script>
</head>
<body>
İsminizi girin: <input type="text" onfocus="renk_degis(this)">
<!-- İsminizi girmek için tıkladığınızda gireceğiniz alanın arkaplanı turuncu olacaktır --> 
</body>
</html>

onSelect Olayı

İnputun içinde yazılan bir şeyi seçtiğiniz an bu olay tetiklenir.

<!DOCTYPE html>
<html>
<head>
<script>
function metin_sec() {
  document.getElementById("demo").innerHTML = "Şu an bir metin seçtiniz";
}
</script>
</head>
<body>
Bir yazı girin: <input type="text" value="Hello world!" onselect="metin_sec()">
<p id="demo"></p>
<!-- girilen yazıyı seçtiğinizde ekranda şu anda bir metin seçtiniz yazacaktır. -->
</body>
</html>

onSubmit Olayı

Bir form kaydedileceği yani gönderileceği zaman önce tanımlanmışsa onsubmit fonksiyonu kullanılır. Genellikle form doğrulama yani validasyon işlemlerinde kullanılır.

<!DOCTYPE html>
<html>
<head>
<script>
function form_gonder() {
  isim= document.forms[0].fname.value;
  alert("Merhaba " + isim+ " kodlamaklazim.com'a hoşgeldin.");
}
</script>
</head>
<body>


<form onsubmit="form_gonder()" action="https://www.kodlamaklazim.com/">
  Enter your name: <input id="isim" type="text" size="20">
  <input type="submit" value="Gönder">
</form>
<!-- Yukardaki formun içindeki inputa birşeyler girip Gönder butonuna bastığınızda ekranda uyarı mesaj penceresei çıkacaktır.  -->

</body>
</html>

onReset Olayı

Adından da anlaşılacağı üzere formun içindeki verileri silmek, sıfırlamak için bu olay kullanılır.

<!DOCTYPE html>
<html>
<head>
<script>
function sifirla() {
  alert("Form içeriği sıfırlandı !");
}
</script>
</head>
<body>
<form onreset="mesaj()">
  İsminizi girin: <input type="text" size="20">
  <input type="reset" value="Gönder">
</form>
</body>
</html>

onkeydown olayı

İnput alanına girip klavye ile bir tuşa bastığınzda bu olay tetiklenir.

<!DOCTYPE html>
<html>
<head>
<script>
function tusa_bas() {
  alert("Bir tuşa bastınız.");
}
</script>
</head>
<body> 
<input type="text" onkeydown="tusa_bas()">
</body>
</html>

onkeypress Olayı

İnputun içine girip bir tuşa bastığınızda ya da basılı tuttuğunuzda bu olay tetiklenir.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  alert("Olay tetiklendi");
}
</script>
</head>
<body>  
<input type="text" onkeypress="tusa_basili_tut()"> 
</body>
</html>

onkeyup olayı

İnputun içinde klavyeye basıp bıraktığınız anda bu olay tetiklenir. Mesela z tuşuna bastınız. Basmayı bıraktığınız anda bu olay tetiklenir.

<!DOCTYPE html>
<html>
<head>
<script>
function keyup_olayi() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>
</head>
<body>  
İsminizi girin: <input type="text" id="fname" onkeyup="keyup_olayi()"> 
</body>
</html>

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi