"Trigger Button Click on Enter"
Bootstrap 3.3.0 Snippet by muhittinbudak

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery Enter Tetikleyici</title> <!-- Tailwind CSS for styling --> <script src="https://cdn.tailwindcss.com"></script> <!-- jQuery Library --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> body { font-family: 'Inter', sans-serif; } </style> </head> <body class="bg-gray-100 min-h-screen flex items-center justify-center p-4"> <div class="w-full max-w-sm bg-white p-6 rounded-xl shadow-2xl space-y-4"> <h3 class="text-xl font-bold text-gray-800">jQuery ile Enter Tuşu Tetikleme</h3> <p class="text-gray-600 text-sm">Giriş alanına yazı yazıp "Enter" tuşuna bastığınızda, düğme tetiklenir ve özel bir mesaj kutusu açılır.</p> <!-- Giriş Alanı --> <input id="myInput" value="Test metni.." class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-150" placeholder="Buraya yazın..."> <!-- Buton --> <button id="myBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg shadow-md transition duration-200"> Butonu Tetikle </button> <!-- Özel Mesaj Kutusu --> <div id="messageBox" class="hidden mt-4 p-4 bg-yellow-100 border border-yellow-400 text-yellow-800 rounded-lg transition-all duration-300 text-sm"> Buton tıklandı! (`alert()` yerine özel mesaj kutusu kullanıldı.) </div> </div> </body> </html>
$(document).ready(function() { // Güvenlik nedeniyle 'alert()' yerine özel mesaj kutusu kullanıldı. $("#myBtn").on('click', function() { // Mesaj kutusunu göster ve sonra gizle const messageBox = $("#messageBox"); messageBox.removeClass('hidden').text("Buton tıklandı! Giriş Değeri: " + $("#myInput").val()); setTimeout(() => { messageBox.addClass('hidden'); }, 2000); }); // myInput alanında "keypress" olayını dinle $("#myInput").on("keypress", function(event) { // event.which, jQuery'de tuş kodunu almak için kullanılır. 13 = Enter tuşu. if (event.which === 13) { // Varsayılan formu gönderme işlemini engelle event.preventDefault(); // Butonun click olayını jQuery ile tetikle $("#myBtn").click(); } }); });

Questions / Comments: