Отправка формы на "Enter" с помощью jQuery?
У меня есть стандартная форма входа в систему-текстовое поле электронной почты, поле пароля и кнопка отправки в проекте AIR, использующем HTML/jQuery. Когда я нажимаю Enter в форме, все содержимое формы исчезает, но форма не представляется. Кто-нибудь знает, является ли это проблемой Webkit (Adobe AIR использует Webkit для HTML), или если я все испортил?
пробовал:
$('.input').keypress(function (e) {
if (e.which == 13) {
$('form#login').submit();
}
});
но это ни остановило поведение очистки, ни отправило форму. Никаких действий. связанный с формой-может ли это быть проблемой? Могу ли я поместить функцию javascript в действие?
14 ответов:
$('.input').keypress(function (e) { if (e.which == 13) { $('form#login').submit(); return false; //<---- Add this line } });Примечание: Вы приняли ответ бендевея, но он неверен с его описанием e.preventDefault(). Проверить это сайте StackOverflow ответ: событие.метод preventDefault() и возвращать false
По сути, "return false" - это то же самое, что и вызов
e.preventDefaultиe.stopPropagation().
в дополнение к возвращению false, как упоминал Джейсон Коэн. Возможно, Вам также придется предотвратить дефолт
e.preventDefault();
Не знаю, поможет ли это, но вы можете попробовать имитировать нажатие кнопки отправки, а не напрямую отправлять форму. У меня есть следующий код в производстве, и он отлично работает:
$('.input').keypress(function(e) { if(e.which == 13) { jQuery(this).blur(); jQuery('#submit').focus().click(); } });Примечание: jQuery ('#submit').фокус() делает кнопку анимировать при нажатии enter.
есть ли причина, по которой вы должны подключить и проверить ключ ввода?
не могли бы вы просто добавить
<input type="submit" />в вашу форму и естественно ли она будет отправлена при нажатии enter? Вы можете даже тогда зацепить форму
onsubmitдействие и вызов функции проверки оттуда, если вы хотите...вы могли бы даже использовать
onsubmitв качестве теста, чтобы увидеть, если ваша форма отправляется, но он не будет работать, если вы вызываетеform.submit().
вот способ сделать это как плагин JQuery (в случае, если вы хотите повторно использовать функциональность):
$.fn.onEnterKey = function( closure ) { $(this).keypress( function( event ) { var code = event.keyCode ? event.keyCode : event.which; if (code == 13) { closure(); return false; } } ); }теперь, если вы хотите украсить с этим типом функциональности это так просто, как это:
$('#your-input-id').onEnterKey( function() { // Do stuff here } );
вы также можете просто добавить
onsubmit="return false"в виде кода на странице, чтобы предотвратить поведение по умолчанию.затем крючок (
.bindили.live) формыsubmitсобытие для любой функции с jQuery в файле javascript.вот пример кода, чтобы помочь:
HTML
<form id="search_form" onsubmit="return false"> <input type="text" id="search_field"/> <input type="button" id="search_btn" value="SEARCH"/> </form>Javascript + jQuery
$(document).ready(function() { $('#search_form').live("submit", function() { any_function() }); });это работает с 2011-04-13, с Firefox 4.0 и jQuery 1.4.3
также для поддержания доступности, Вы должны использовать это, чтобы определить свой код ключа:
c = e.which ? e.which : e.keyCode; if (c == 13) ...
Это мой код:
$("#txtMessage").on( "keypress", function(event) { if (event.which == 13 && !event.shiftKey) { event.preventDefault(); $("#frSendMessage").submit(); } });
просто добавление для легкой реализации. Вы можете просто сделать форму, а затем сделать кнопку отправки скрытой:
например:
<form action="submit.php" method="post"> Name : <input type="text" name="test"> <input type="submit" style="display: none;"> </form>
Я сейчас использую
$("form").submit(function(event)сначала я добавил eventhandler к кнопке отправки, которая произвела ошибку для меня.
в HTML-код:
<form action="POST" onsubmit="ajax_submit();return false;"> <b>First Name:</b> <input type="text" name="firstname" id="firstname"> <br> <b>Last Name:</b> <input type="text" name="lastname" id="lastname"> <br> <input type="submit" name="send" onclick="ajax_submit();"> </form>в кодах Js:
function ajax_submit() { $.ajax({ url: "submit.php", type: "POST", data: { firstname: $("#firstname").val(), lastname: $("#lastname").val() }, dataType: "JSON", success: function (jsonStr) { // another codes when result is success } }); }
я узнал сегодня, что событие нажатия клавиши не срабатывает при нажатии клавиши Enter, поэтому вы можете переключиться на keydown() или keyup() вместо этого.
мой тестовый скрипт:
$('.module input').keydown(function (e) { var keyCode = e.which; console.log("keydown ("+keyCode+")") if (keyCode == 13) { console.log("enter"); return false; } }); $('.module input').keyup(function (e) { var keyCode = e.which; console.log("keyup ("+keyCode+")") if (keyCode == 13) { console.log("enter"); return false; } }); $('.module input').keypress(function (e) { var keyCode = e.which; console.log("keypress ("+keyCode+")"); if (keyCode == 13) { console.log("Enter"); return false; } });вывод в консоли при вводе "A Enter B" на клавиатуре:
keydown (65) keypress (97) keyup (65) keydown (13) enter keyup (13) enter keydown (66) keypress (98) keyup (66)вы видите, что во второй последовательности "нажатие клавиши" отсутствует, но keydown и keyup регистрируют код " 13 " Как нажатый/отпущенный. Согласно jQuery документация по функции нажатие клавиши ():
Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.протестировано на IE11 и FF61 на сервере 2012 R2
попробуйте это:
var form = document.formname; if($(form).length > 0) { $(form).keypress(function (e){ code = e.keyCode ? e.keyCode : e.which; if(code.toString() == 13) { formsubmit(); } }) }
Comments