Отправка формы на "Enter" с помощью jQuery?



У меня есть стандартная форма входа в систему-текстовое поле электронной почты, поле пароля и кнопка отправки в проекте AIR, использующем HTML/jQuery. Когда я нажимаю Enter в форме, все содержимое формы исчезает, но форма не представляется. Кто-нибудь знает, является ли это проблемой Webkit (Adobe AIR использует Webkit для HTML), или если я все испортил?



пробовал:



$('.input').keypress(function (e) {
if (e.which == 13) {
$('form#login').submit();
}
});


но это ни остановило поведение очистки, ни отправило форму. Никаких действий. связанный с формой-может ли это быть проблемой? Могу ли я поместить функцию javascript в действие?

682   14  

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.

Return false для предотвращения продолжения нажатия клавиши.

есть ли причина, по которой вы должны подключить и проверить ключ ввода?

не могли бы вы просто добавить

<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

    Ничего не найдено.