JavaScript – Enter Tuşu İle Form Gönderilmesini Engelleme

17 Aralık 2019 tarihinde Emre Can ÖZTAŞ tarafından paylaşıldı.

Form işlemlerimlerinde bizi en çok yoran şeylerden birisi de; enter tuşu ile formun tamamlanmadan gönderilmesi. Örneğin; formu tam doldurmadan yapılan ‘gönderim’ işlemleri, arka tarafta iyi işlenmezse başınıza büyük problemler açabilir. Hatta küçük bir form bile sistemin sağlıklı işleyişini durdurabilir.

Enter tuşu ile form gönderiminin önüne geçmek için; JavaScript ve jQuery ile bu işlemi nasıl gerçekleştirebileceğimizi bu yazıda bulacaksınız.

Enter tuşunun kodu 13’tür. Yani; enter tuşunu bastığınızda bu 13 olarak algılanır. Diğer tuşların karşılıklarını buradan bulabilir ve buradan da test edebilirsiniz. Biz de yazacağımız kodlarımızda 13 sayısını dinleyeceğiz.

JavaScript İle Enter Tuşunu Engelleme

Aşağıdaki JavaScript kodlarımız ile Enter tuşunu engelleyebiliriz.

function no_enter(event) {
    event = event || window.event;
    if (event.which === 13) {
        event.preventDefault();
        return (false);
    }
}

Peki bu kodu nasıl kullanacağız? Bu kodu; herhangi bir form elementinde de kullanabileceğiniz gibi bir sayfa üzerinde de kullanabilirsiniz. Kısacası; her yerde kullanabilirsiniz.

Yukarıdaki kodlarımızı anlamak için aşağıdaki örneğimizi inceleyelim.

<!DOCTYPE html>
<html>

<head>
    <title>NO ENTER!</title>
    <meta charset="utf-8">
</head>

<body>
    <form action="record.php" method="POST">
        <input type="text" onkeypress="no_enter(event)">
    </form>

    <script>
    function no_enter(event) {
        event = event || window.event;
        if (event.which === 13) {
            event.preventDefault();
            return (false);
        }
    }
    </script>
</body>

</html>

Yukarıdaki kodlarımız, formun içindeki <input> elementinde enter tuşuna basılmayı engellemiştir. Burada; enter tuşuna basıldığı anda, eğer form elementi boş değilse formu gönder boşsa hata ver şeklinde de yapabiliriz. Tabi ki bu kısım tamamen size kalmış durumda.

jQuery İle Enter Tuşunu Engelleme

jQuery ile enter tuşunu engelleme işlemi de yukarıdaki yazdığımız kodlarla aynı, sadece jQuery söz dizimine göre yazmamız gerekiyor.

Yukarıdaki örneğimizi ele alalım.

<!DOCTYPE html>
<html>

<head>
    <title>NO ENTER!</title>
    <meta charset="utf-8">
</head>

<body>
    
    <form action="record.php" method="POST">
        <input type="text">
    </form>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
    $('form > *').keypress(function(event) {
        event = event || window.event;
        if (event.which === 13) {
            event.preventDefault();
            return (false);
        }
    });
    </script>
</body>

</html>

Yukarıdaki örneğimizi biraz farklılaştırdık. <form> elementi altındaki herhangi bir element üzerinde, enter tuşuna basıldığı zaman bu enter tuşunu engelleyerek formun gönderilmesine izin vermedik.

İşte bu ve buna benzer bir çok örnek ile formun, enter tuşu ile gönderilmesini engelleyebilir ve enter tuşuna basılması durumunda çeşitli durumlarla bu süreci yönetebilirsiniz.

Kategoriler: [JavaScript] Etiketler: #javascript #jquery #keyboard

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.