Form alanında enter tuşunu simüle edin ve diğer işleyicileri de koruyun

Question

Geliştirdiğimiz bir yazılım parçası için form alanlarıyla bağlanan genel bir yaklaşım yapmaya çalışıyoruz.

Şimdiye kadar çok iyi, ancak başka bir işleyiciye bağlı bir form/alan göndermeyi engelleyen bir kenar durumdayız. İşte

(özet) kullanım durumu var:

HTML:

<form id="form1"> 
    <input type=field id="field1"/> 
</form> 
<a href="#" id="link">click to submit</a> 

Normal davranış, bir kullanıcı, tiplerin alanına 'foo' ve isabet girdiğinizde, form ele ve sunulan olmasıdır formun açılış etiketinde mutlaka tanımlanmış olan doğru 'bitiş noktası'. Bu giriş olayını işleyen bazı işlevler (başka bir yerden) olabilir.

Ne yazık ki, bu işlevin ne olduğunu tahmin edemeyiz, bunu genel olarak tutmayı seviyoruz. Yukarıdaki HTML'de, linke tıklandığında, tarayıcı/kullanıcı davranışını taklit eden ve dolayısıyla bilinmeyen bazı işleyicileri taklit eden form alanında bir enter-event tetiklenmelidir.

Bu (biz jquery kullanıyoruz) bizim Javscript geçerli:

$('#field1').keypress(function (event) { 
    if (event.which == 13) { 
    console.log("enter pressed"); 
    //return false; only if needed 
    } 
}); 

$("#link").click(function() { 
    var e = jQuery.Event('keypress'); 
    e.which = 13; // #13 = Enter key 
    $("#field1").focus(); 
    $("#field1").trigger(e); 
}) 

alana 'foo' girilmesi ve presleme form gönderildiğinde alır girin. Ancak bağlantıyı tıkladığımızda, bir odak() yaparız ve ardından anahtar olayını tetikleriz, ancak formu, gönderilmez.

Bilinmeyen işleyiciler nedeniyle bir submit() kullanamıyoruz.

kodu buraya deneyin: http://codepen.io/conversify/pen/yOjQob

Answer 1

girdi içinde olup olmadığını nedir tuşuna basıldığında girdiğinizde olur ise bir form, form gönderilir. Bu varsayılan davranıştır. Bir tuşa basmayı simüle ettiğinizde, varsayılan davranış engellenmedikçe, aynısını yapmalısınız.

$('#field1').keypress(function (event) { 
    if (event.which == 13) { 
    console.log("enter pressed"); 
    // event.preventDefault(); if needed 
    } 
}); 

$("#link").click(function() { 
    var e = jQuery.Event('keypress'); 
    e.which = 13; // #13 = Enter key 
    $("#field1").focus(); 
    $("#field1").trigger(e); 
    var form=$("#field1").closest("form"); 
    if(form&&!e.isDefaultPrevented()) form.submit(); 
}) 

Artık işleyicileri için olay nesnesini geçebilir ve onlar bu yüzden isterseniz göndermek önleyebilir veya Tuşa basma işleyicisi içinde önleyebilir.

Answer 2

Sen unbind('submit') kullanarak bilinmeyen işleyicileri unbind ve aşağıdaki gibi submit() kullanabilirsiniz.

$("#link").click(function() { 
    $("#form1").unbind('submit').submit(); 
}); 

Answer 3

Form işleyiciyi girişten ayırmanız ve işleyicileri tıklatmanız gerekir.

$('#field1').keypress(function (event) { 
    if (event.which == 13) { 
    formHandler(); 
    } 
}); 

Ve böyle tıklama işleyicisi:

var formHandler = function(e) { 
    // ... code to submit form ... 
    console.log("form handled"); 
};  

O zaman bu gibi keypress işleyicisi set

$("#link").click(function() { 
    formHandler(); 
});