Metin giriş alanında Enter tuşunu algılama


Yanıtlar:


500
$(".input1").on('keyup', function (e) {
    if (e.keyCode === 13) {
        // Do something
    }
});


//keyup not compatible with Jquery select(), Keydown is.

Hangi tarayıcıda test ediyordunuz? IE eski sürümleri belgede keyup olayları tetiklemiyorum düşünüyorum (bu konuda emin değilim ama).
Joseph Silber

2
Kodunuz .is () kullandığınız ve == yerine === gerektiği için çalışmadı. Daha fazla ayrıntı için cevabıma bakın.
wesbos

6
O değil @jQuerybeast gerekli ve event.keyCodebir olan NumberJavaScript ile aynı adımları atacaktır yüzden, ==ya ===.
alex

7
e.which daha yararlı çapraz tarayıcılar ilan edildi
mohammad eslahi sani

2
Özellikleri which, code, charCodeve keyCodekullanımdan kaldırılmıştır developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent , cevabınıza gerçek bilgiyi ekleyin.
Sasay

120

event.key === "Enter"

Daha yeni ve daha temiz: kullanın event.key. Artık keyfi sayı kodları yok!

const node = document.getElementsByClassName(".input")[0];
node.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // Do work
    }
});

JQuery kullanmanız gerekiyorsa:

$(document).keyup(function(event) {
    if ($(".input1").is(":focus") && event.key == "Enter") {
        // Do work
    }
});

Mozilla Belgeleri

Desteklenen Tarayıcılar


6
düz javascript sürümü için kudos, neden diğerlerinin jquery olduğundan emin değilim
Kaptan Fantastic

7
Çünkü OP örnek kodunu jQuery'ye koydu ve JavaScript'in yanı sıra jQuery de etiketlendi.
19:49, Tigerrrrr

44
$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

Veya sadece girişin kendisine bağlanın

$('.input1').keyup(function (e) {
    if (e.keyCode === 13) {
       alert('ya!')
    }
  });

Hangi keyCode'a ihtiyacınız olduğunu anlamak için http://keycode.info web sitesini kullanın.


Teşekkür ederim. Yeni bir şey öğrendim. Bu arada .is () ALOT kez kullandım, bu yüzden mantık değil, çalışmıyor. Ayrıca ==, yine diğer durumlar için iki == kullandım
jQuerybeast

np, her zaman ===
wesbos

12

EnterBir metin kutusuna basılan tuşu algılamak için bunu deneyin .

$(function(){

$(".input1").keyup(function (e) {
    if (e.which == 13) {
        // Enter key pressed
    }
 });

});

6

Bu soruya cevap vermek için çok geç olabilir. Ancak aşağıdaki kod yalnızca enter tuşunu engeller. Sadece kopyala yapıştır çalışır.

        <script type="text/javascript"> 
        function stopRKey(evt) { 
          var evt = (evt) ? evt : ((event) ? event : null); 
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
          if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
        } 

        document.onkeypress = stopRKey; 

        </script>

6

Bulduğum en iyi yol kullanmak keydown( keyupbenim için iyi çalışmıyor).

Not: Ayrıca form gönderimini de devre dışı bıraktım çünkü Enter tuşuna basarken bazı eylemler yapmak istediğinizde, sadece beğenmediğinizi düşünmek formu göndermektir :)

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});

event.keyCode kullanımdan kaldırıldı event.which değil, bu yüzden daha iyi
Alex

3

Benim için çalışan çözüm şudur:

$("#element").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // do something
    }
});

1

Bir metin kutusuna basılan Enter tuşunu algılamak için bunu deneyin.

$(document).on("keypress", "input", function(e){
    if(e.which == 13){
        alert("Enter key pressed");
    }
});

DEMO


0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });

0

Bu kod, sitenin tamamındaki benim için her girdiyi işledi. Bir INPUT alanı içinde ENTER KEY kontrol eder ve TEXTAREA veya diğer yerlerde durmaz.

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.