JavaScript Text Kutusunda Enter’a Basınca Buton Çalıştırma – Web Tasarım & Programlama
Input text kutusu içindeyken klavyeden enter tuşuna basıldığında butonu çalıştırmak için text kutusundayken keypress olayında basılan tuş enter olup olmadığı kontrol edilip butonun onclick olayı tetiklenebilir.
Örnek 1: Basit bir şekilde text kutusundayken buton olayı tetiklenmiştir.
JavaScript Kodu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang=“tr”> <head> <meta charset=“UTF-8”> <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Yazılım Kodlama</title> </head> <body> <button id=“btn” onkey>Selam</button> <input id=“mesaj” type=“text”> <script> document.querySelector(“#btn”).onclick=function(){ alert(“butona basıldı!!”) }
document.querySelector(“#mesaj”).onkeyup=function(e){ console.log(e) if(e.code==“Enter”) { //butonu çalıştır document.querySelector(“#btn”).onclick()
} } </script> </body> </html>
|
Örnek 2: Bu örnekte text kutusuna girilen değer butondaki olay yardımı ile div içinde yazdırılmaktadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang=“tr”> <head> <meta charset=“UTF-8”> <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Yazılım Kodlama</title> </head> <body> <button id=“btn” onkey>Yazdır</button> <input id=“mesaj” type=“text”> <div id=“sonuc”></div> <script>
btn.onclick=function(){ sonuc.innerHTML+=mesaj.value+“<br>” mesaj.value=“” }
mesaj.onkeyup=function(e){ if(e.code==“Enter”) { //butonu çalıştır document.querySelector(“#btn”).onclick()
} } </script> </body> </html>
|
