0

如果按下回车键，我有以下 jquery 代码用于提交表单：

$('body').on('keypress', 'input', function(event) {
    if (event.which === 13) {
        event.preventDefault();
        $(this).closest('form').submit();
    }
});

另外，我在页面加载时的用户名字段上将登录页面设置为 .focus() 。

因此，如果用户只是按住“输入”键，它将提交、失败、返回、聚焦、提交、重复。

我可以将按键事件仅在密码字段中触发，但我宁愿找到一种方法来检测长按键或防止这种情况的发生。

4

2 回答 2

2

限制事件，使其每秒只能发生一次。

var timer;
$('body').on('keypress', 'input', function(event) {
    var self = this;
    if (event.which === 13) {
        event.preventDefault();
        clearTimeout(timer);
        timer = setTimeout(function(){
            $(self).closest('form').submit();                
        },1000)
    }
});
于 2012-10-03T21:33:15.647 回答
0

就像 Blender 说的那样，对于大多数浏览器来说，这是一种默认行为，对于表单中的输入，当您按下 Enter 键时提交表单（就像单击具有提交类型的输入）。

您的第一个代码似乎有点没用，因为它阻止了默认行为（提交表单），但最终提交了表单。

对于这样的问题，超时解决方案还不错，但在我看来太复杂了。

您的页面是一个登录页面，这意味着您希望在填写登录名和密码时允许登录尝试。此外，您不希望在短时间内允许多次提交同一页面。

你可以写一段代码，比如：

// Listening on submit event of the form
$("#FORM_ID").submit(function(submitEvent) {

    // Check if the login and password are not empty
    if (($.trim($("#LOGIN_INPUT_ID").val())).length == 0 ||
        ($.trim($("#PASSWORD_INPUT_ID").val())).length == 0)
    {
        // login or password is empty -> cancel the submit
        submitEvent.preventDefault();

        // TODO : warn user with a message
        // like "Please, fill login and password first !"

        return false;
    }

    // Avoid multiple submit at the same time
    // (for stupid guy clicking 10 times in 1 s)
    if ($(this).hasData('alreadySubmitted'))
    {
        // The form is currently already submit -> cancel the submit
        submitEvent.preventDefault();
        return false;
    }

    // Set the form "submitted"
    $(this).data('alreadySubmitted', true);

   // Let the submit do his job...
   return true;
});
于 2012-10-03T22:06:02.130 回答