CODEWITHSUNDEEP
javascriptjqueryhtmlinput
Toby Cannon
Toby Cannon

Reputation: 735

Jquery function never running on the first instance it is called

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

$("#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")>

Upvotes: 2

Views: 81

Answers (6)

Maurice Perry
Maurice Perry

Reputation: 32831

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:

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

JavaScript:

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

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

Upvotes: 1

Barry Keepence
Barry Keepence

Reputation: 136

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/

Upvotes: 0

ketan
ketan

Reputation: 19341

You have to check keycode on document click like following:

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

Check Fiddle.

Upvotes: 0

Jai
Jai

Reputation: 74738

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>

Upvotes: 1

kockburn
kockburn

Reputation: 17626

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

Upvotes: 2

Clay
Clay

Reputation: 478

If you force focus on the button it should work?

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

Upvotes: 0

Related Questions