Jquery函数从不在它被调用的第一个实例上运行

I am trying to create a submit button that will submit when the user presses the enter key.

我正在尝试创建一个提交按钮，当用户按下回车键时将提交该按钮。

I am having to click the submit button once, before I can use the enter button as a 'virtual click'.

我必须先单击“提交”按钮，然后才能将“输入”按钮用作“虚拟点击”。

If I try to use the enter key to submit straight away, it won't do it, the first press has to be with the mouse. What is causing this bug?

如果我尝试使用回车键直接提交，它将不会这样做，第一次按下必须使用鼠标。是什么导致了这个错误？

JsFiddle

的jsfiddle

$("#guessSubmit").keydown(function(event){
    if(event.keyCode == 13){
		$("#guessSubmit").click();
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="guessSubmit" onclick=alert("test")>

6 个解决方案

#1

You shouldn't add keypress on the button, but on the body or the window.

您不应该在按钮上添加按键，而是在正文或窗口上添加按键。

$(document.body).keydown(function(event){
    if(event.keyCode == 13){
        $("#guessSubmit").click();
    }
});

Demo

演示

#2

You can use autofocus property:

您可以使用自动对焦属性：

$("#guessSubmit").keydown(function(event){
    if(event.keyCode == 13){
        $("#guessSubmit").click();
        return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="guessSubmit" onclick='alert("test")' autofocus>

#3

The button will only receive key events when it is in focus. You can programmatically set the focus like so:

该按钮仅在焦点处于关键状态时才会收到关键事件。您可以通过编程方式设置焦点，如下所示：

$("#guessSubmit").focus();

UPDATE: But there is a much better way to handle the 13 key: put your button in a form. The form will be submitted whenever an enter key is pressed and the focus is on any input element in the form: HTML:

更新：但有一个更好的方法来处理13键：将您的按钮放在一个表单中。只要按下回车键并且焦点位于表单中的任何输入元素上，表单就会被提交：HTML：

<form id="myform">
    <input type="text" name="text" autofocus />
    <input type="submit" id="guessSubmit" />
</form>

JavaScript:

JavaScript的：

$("#myform").on("submit", function(e) {
    e.stopPropagation();
    e.preventDefault();
    alert("test");
});

See fiddle here: http://jsfiddle.net/robbyn/62vnrcde/

请看这里的小提琴：http：//jsfiddle.net/robbyn/62vnrcde/

#4

If you force focus on the button it should work?

如果你强调按钮它应该工作？

$("#guessSubmit").focus().keydown(function(event){
    if(event.keyCode == 13){
        $("#guessSubmit").click();
    }
});

#5

You have to check keycode on document click like following:

您必须检查文档上的键代码，如下所示：

$(document).keypress(function(event){
                if(event.keyCode === 13){
                    $("#guessSubmit").click();
                }
            });

Check Fiddle.

检查小提琴。

#6

I had a very similar issue and it was to do with focus. I had to set the current focus to the element. It works with the mouse because that sets focus.

我有一个非常类似的问题，它与焦点有关。我不得不将当前焦点设置为元素。它适用于鼠标，因为它设置了焦点。

Here is an updated code

这是一个更新的代码

//Submits if enter key is pressed
            $("#guessSubmit").keydown(function(event){
                if(event.keyCode == 13){
                    $("#guessSubmit").click();
                    event.preventDefault();
                }
            });

$("#guessSubmit").focus();

https://jsfiddle.net/6tk92stn/

#1