JQuery kullanarak klavyede Enter tuşuna basmayı nasıl tespit edebilirim?

731

Kullanıcının EnterjQuery kullanarak preslenmiş olup olmadığını tespit etmek istiyorum .

Bu nasıl mümkün olabilir? Bir eklenti gerektiriyor mu?

EDIT: Görünüşe göre keypress()yöntemi kullanmam gerekiyor .

Herkes bu komut ile tarayıcı sorunları olup olmadığını bilmek bilmek istedim - bilmem gereken herhangi bir tarayıcı uyumluluk sorunları var mı?

javascript  jquery  keyboard-events  enter  jquery-events 
— chris
kaynak
— Haim Evgi
5
Javascript çerçevelerindeki en iyi şeylerden biri, varsayılan olarak çapraz tarayıcı uyumlu olmalarıdır. Kullanıcının gerekmemesi için tarayıcı uyumluluk kontrollerini işlerler. JQuery kaynak kodunu okumadım ama keypress işlevselliğinin bu anlamda farklı olduğunu düşünüyorum.
— miek
2
tek tarayıcı uyumluluğu sorunu, ascii kodunu algılamak için e.keyCode yerine e.which kullanmanızdır.
— Daniel
1
— Lemo

Yanıtlar:

1330

JQuery'nin asıl amacı, tarayıcı farklılıkları hakkında endişelenmenize gerek olmamasıdır. enterTüm tarayıcılarda 13 yaşında olmakla güvenle gidebileceğinizden eminim . Bunu akılda tutarak, bunu yapabilirsiniz:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
— Paolo Bergantino
kaynak
7
Bunu bağlıyorum çünkü bunu okudum ve keypress'in IE ile neden çalışmadığına dair başımı çiziyorum. ( $(window)IE altında bağlanmaz ) quirksmode.org/dom/events/keys.html
— Gizli
17
e.keyCode% 100 çapraz tarayıcı değil. e.which'i aşağıda gösterildiği gibi kullanın
— Daniel
15
JQuery dokümantasyonundan "event.which özelliği, event.keyCode ve event.charCode öğelerini normalleştirir. Klavye tuş girdisi için event.which öğesinin izlenmesi önerilir."
— Riccardo Galli
20
$ (document) .on ('tuşa
— basma
5
Olay yayılımı nedeniyle verilen işlev birden çok yürütme alıyorum (yani, uyarı iki kez atılıyor). Bunu durdurmak için, işlevin sonuna bir e.stopPropagation () ekleyin
— dpb
129

Bir olayı "basılan enter tuşuna" bağlamayı kolaylaştırmak için küçük bir eklenti yazdım:

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

Kullanımı:

$("#input").enterKey(function () {
    alert('Enter!');
})
— Andrea
kaynak
Benim için bu does değil iş (i got #inputüzerine <input>alanda)
— Rápli Andras
1
#İnput öğesi dinamik olacaksa ne olur?
— Jigar7521
@mplungjan "delegating" ile ne demek istediğinizden emin değilim
— Andrea
$("#input").on("someevent","someselector",function () {})
— mplungjan
62

@Paolo Bergantino tarafından çalışmak için gönderilen kodu alamadım ama bunu değiştirdiğimde $(document)ve e.whichbunun yerine e.keyCodekusursuz bir şekilde buldum.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

JS Bin'deki örneğe bağlantı

— Ian Roke
kaynak
Benim için e. Hangi IE ile çalışmaz. Başkaları için işe yarıyor mu?
— Umesh Rajbhandari
IE'nin hangi sürümü? IE7'de benim için iyi çalışıyor.
— Ian Roke
JQuery dokümantasyonundan "event.which özelliği, event.keyCode ve event.charCode öğelerini normalleştirir. Klavye tuş girdisi için event.which öğesinin izlenmesi önerilir."
— Riccardo Galli
52

Bunu tarayıcılar arası daha uyumlu buldum:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});
— jesal
kaynak
1
Üçlü IF'niz kısaltılabilir: var keycode = event.keyCode || event.which;
— pistol-pete
29

Bunu jquery 'keydown' olay tutamacını kullanarak yapabilirsiniz

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });
— Nasruddin
kaynak
11

Kullanımı event.keyve modern JS!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

veya jQuery olmadan:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Mozilla Belgeleri

Desteklenen Tarayıcılar

— Gibolt
kaynak
9

Ben bazen bu çözüm ile gelip geçirdi umarım birine yardımcı olur.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});
— Samuel Kwame Antwi
kaynak
7

Andrea'nın yukarıdaki cevabının küçük bir uzantısı, değiştirilmiş giriş preslerini (örneğin ctrl-enter veya shift-enter) yakalamak istediğinizde yardımcı yöntemi daha kullanışlı hale getirir. Örneğin, bu varyant aşağıdaki gibi bağlanmaya izin verir:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

kullanıcı formun metin alanına odaklanarak ctrl-enter tuşuna bastığında bir form göndermek için.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(ayrıca bkz. Ctrl + TEXTAREA'da jQuery girin )

— joeln
kaynak
4

Bazı durumlarda, ENTERbir sayfadaki belirli bir alanın anahtarını bastırmanız gerekebilir, ancak aşağıdaki sayfa ARAMA alanına sahip bir başlık içeren sayfa gibi diğer alanların anahtarını kaldırmanız gerekebilir .<div>

Bunu nasıl yapacağımı anlamak biraz zaman aldı ve bu basit ama tam örneği topluluk için buraya gönderiyorum.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

JSFiddle Playground'a bağlantı : [Submit]Düğme hiçbir şey yapmaz, ancak ENTERMetin Kutusu denetimlerinden birine basmak formu göndermez.

— jp2code
kaynak
2

keypressEtkinlik herhangi bir resmi şartname kapsamında olmadığından , etkinlik kullanılırken karşılaşılan gerçek davranış tarayıcılar, tarayıcı sürümleri ve platformlar arasında farklılık gösterebilir.

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>
Snippet'i genişlet

Umarım faydalı olur!

— Zoe_NS
kaynak
Dikkat çekmek gerekirse, keypressspesifikasyonda (artık) bulunmamasının nedeni , kullanımdan kaldırılmış olmasıdır ( MDN ).
— YellowAfterlife
yani, ben düzenledim ... tnx <3
— Zoe_NS
0

Kullanıcının enter tuşuna basıp basmadığını tespit etmenin kolay yolu, cihazınızdaki tuşun değerini kontrol etmek için enter tuş numarasını = 13 olarak kullanmaktır.

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

enter tuşuna basarak 13 olarak sonuç alırsınız. anahtar / değer çiftini kullanarak bir işlevi çağırabilir veya istediğinizi yapabilirsiniz

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

Enter tuşuna basıldığında bir düğmeyi hedeflemek istiyorsanız, kodu kullanabilirsiniz 

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

Umarım yardımcı olur

— user2216399
kaynak
0

Bence en basit yöntem vanilya javacript kullanmak olacaktır :

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
— Duan Walker
kaynak
0 
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
— Tayfun Açıkgöz
kaynak
3
Askerin kodunuzun nasıl çalıştığını açıklamak için biraz açıklayıcı yorum ekleyebilir misiniz - teşekkürler.
— SaschaM78
0 
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
— AzizAhmad
kaynak
Bu, diğer cevapların bir uyarlaması gibi görünüyor - sizinkini diğerleri kadar ilginç hale getirmek için biraz açıklama ekleyebilir misiniz?
— Nico Haase
0

Ben kullandım $(document).on("keydown").

Bazı tarayıcılarda keyCodedesteklenmez. İle aynı whicheğer öyleyse keyCodekullanmak gerek desteklenmez whichtersi ve yardımcısı.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Snippet'i genişlet

— Justin Liu
kaynak
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.