Tetikleyicileri gir düğmesini tıklayın

İki düğmeli bir sayfam var. Biri bir <button>element, diğeri bir <input type="submit">. Düğmeler sayfada bu sırayla görünür. Formun herhangi bir yerinde bir metin alanındaysanız ve <Enter>düğmesine basarsam, düğme öğesinin clickolayı tetiklenir. Sanırım bunun nedeni düğme öğesinin önce oturmasıdır.

Varsayılan düğmeyi ayarlamanın güvenilir bir yolu gibi görünen bir şey bulamıyorum veya bu noktada mutlaka yapmak istemiyorum. Daha iyi bir şeyin yokluğunda, formun herhangi bir yerinde bir tuşa bastım ve <Enter>basılan anahtar olsaydı , sadece reddediyorum:

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

Şimdiye kadar anlayabildiğim kadarıyla, çalışıyor gibi görünüyor, ancak inanılmaz derecede yumruklu hissediyor.

Bunu yapmak için daha sofistike bir teknik bilen var mı?

Benzer şekilde, bu çözümün farkında olmadığım tuzakları var mı?

Teşekkürler.

kullanma

<button type="button">Whatever</button>

hile yapmalı.

Bunun nedeni, form içindeki bir düğmenin türünün örtük olarak ayarlanmış olmasıdır submit. ZzzzBoz'un dediği gibi, Spec bu durumda ilk buttonveya inputbirlikte type="submit"tetiklenen şey olduğunu söylüyor . Özel olarak ayarlarsanız type="button", tarayıcı tarafından dikkate alınmaz.

Hangi davranışın bekleneceğini gerçekten anlamak için HTML spesifikasyonlarını okumak önemlidir:

HTML5 Spec açıkça neler olduğunu bildirenimplicit submissions :

Form öğesinin varsayılan düğmesi, ağaç sahibindeki form sahibi o form öğesi olan ilk gönderme düğmesidir.

Kullanıcı aracısı kullanıcının formu dolaylı olarak göndermesine izin veriyorsa (örneğin, bir metin alanı örtük olarak odaklanırken "enter" tuşuna basan bazı platformlarda formu gönderirse, bunu varsayılan düğmesi tanımlanmış bir etkinleştirme olan bir form için yaparsa) davranış, kullanıcı aracısının bu varsayılan düğme üzerinde sentetik tıklama etkinleştirme adımlarını çalıştırmasına neden olmalıdır.

Bu, HTML4 spesifikasyonunda açıkça belirtilmedi, ancak tarayıcılar zaten HTML5 spesifikasyonunda tarif edilenleri uyguluyorlar (bu yüzden açıkça dahil edilmiştir).

Eklemek için düzenleyin:

Düşünebildiğim en basit cevap, gönderme düğmenizi [type="submit"]formdaki ilk öğe olarak koymak , formun altına css ile dolgu eklemek ve kesinlikle gönderme düğmesini istediğiniz yere yerleştirmektir.

Bunu düzeltmek için javascript veya CSS'ye ihtiyacınız olduğunu düşünmüyorum.

Düğmeler için html 5 spesifikasyonuna göre, tip niteliği olmayan bir düğme, türü "gönder" olarak ayarlanmış bir düğmeyle aynı şekilde ele alınır, yani içerdiği formu göndermek için bir düğme olarak ele alınır. Düğmenin türünü "düğme" olarak ayarlamak, gördüğünüz davranışı engellemelidir.

Bunun için tarayıcı desteği hakkında emin değilim, ama aynı davranış düğmeleri için html 4.01 spec belirtildi, bu yüzden oldukça iyi bekliyoruz.

Odaklanılan 'Enter' tuşuna basarak <input type="text">ilk konumlandırılmış öğede 'click' olayını tetiklersiniz: <button>veya <input type="submit">. 'Enter' tuşuna basarsanız <textarea>, yeni bir metin satırı oluşturursunuz.

Buradaki örneğe bakın .

Kodunuz yeni bir metin satırı girmeyi engeller <textarea>, bu nedenle yalnızca tuşa basmayı yakalamanız gerekir <input type="text">.

Ama neden Entermetin alanına basmanız gerekiyor ? 'Enter' tuşuna basarak form göndermek istiyorsanız, ancak <button>mizanpajda ilk sırada kalmanız gerekiyorsa, işaretlemeyle oynayın: <input type="submit">kodu önüne koyun ve <button>ihtiyacınız olan düzeni kaydetmek için CSS kullanın.

'Enter'ı yakalamak ve işaretlemeyi kaydetmek:

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});

<button>Varsayılan olarak bir öğeyi kullandığınız yerde bu düğmeyi dikkate alır, type="submit"böylece düğmeyi tanımlarsanız gönder düğmesi olarak type="button"kabul edilmez <button>.

Bir formun metin alanına enter tuşuna basmak, varsayılan olarak formu gönderir. Bu şekilde çalışmasını istemiyorsanız, enter tuşuna basmanız ve yaptığınız gibi tüketmeniz gerekir. Etrafta yol bulunmuyor. Formda düğme olmasa bile bu şekilde çalışacaktır.

Form gönderimini uygun zamana kadar engellemek için javascript kullanabilirsiniz. Çok kaba bir örnek:

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

Enter tuşuna basmak yine de formun gönderilmesini tetikleyecektir, ancak javascript siz gerçekten düğmeye basana kadar göndermesini engeller.

Dom örneği

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

javaScript

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

preventDefault () kullanmazsanız, diğer düğmeler tetiklenir.

Bunu aşağıdaki gibi yaparım: Düğmenin onclick olayı için işleyicide (göndermeyin) olay nesnesinin anahtar kodunu kontrol edin. "Enter" ise, yanlış dönecekti.

Durumumun Submitform öğesinde iki düğme vardır: Updateve Delete. DeleteDüğme bir görüntü siler ve Updatedüğme şeklinde metin alanları ile veritabanını günceller.

Çünkü Deletedüğme şeklinde ilk, o varsayılan düğme oldu Entertuşu. İstediğim gibi değil. Kullanıcı Enterbazı metin alanlarını değiştirdikten sonra vurabilmeyi bekleyebilir .

Burada varsayılan düğmeyi ayarlamak için cevabımı buldum :

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

Herhangi bir komut dosyası kullanmadan, her düğmenin <button> form="bla"özniteliği kullanmakta olduğu formu tanımladım . Ben set Deletevar ve set olmayan bir forma için düğmeye Updateben tetikleyicisi istedim düğmesine Enterkullanıcı metin girerken olacağını forma anahtarın.

Benim için şimdiye kadar işe yarayan tek şey bu.

Böyle bir şey yapabilirsiniz.

etkinliğinizi ortak bir işleve bağlayın ve tuşa basarak veya düğmeye basarak etkinliği çağırın.

Örneğin.

function callME(event){
    alert('Hi');
}



$('button').on("click",callME); 
$('input ').keypress(function(event){
  if (event.which == 13) {
    callME(event);
  }
});

Formun ilk öğesi olarak "gönder" türünde bir düğme ekledim ve görünmez yaptım ( width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;). Sitenin yenilenmesi gibi çalışır, yani düğmeye tekrar basıldığında sitenin tekrar yüklenmesi dışında hiçbir şey yapmam. Benim için iyi çalışıyor ...