HTML onKeyDown-Event calling function and button-click

Question

I'm trying to create a search option.

If someone is using my search field, they can press the "Search-Button" or just press the enter key to start the function.

My problem is that if they press the enter key within the text box it starts my function and after the function it calls the button click.

I've used Google but couldn't solve it, even tried to disable the button while myFunc() is called.

<!DOCTYPE html>
<html>
    <body>
        <form>Search
            <br>
            <input type="text" id="searchField" onKeyDown="if(event.keyCode==13) myFunc()">
            <br>
            <button type="button" id="myButton" onClick="myFunc()">Search</button>
        </form>
    </body>
</html>

Where is the myFunc() code? The most important part of your question — Jesse
– Jesse, Commented Oct 28, 2015 at 16:11
@Jesse the function its self has nothing to do with the question. — Adam Buchanan Smith
– Adam Buchanan Smith, Commented Oct 28, 2015 at 16:23

Stefan Braun · Accepted Answer · 2015-10-28 16:18:54Z

1

Looks like you want to stop the event propagation in this case. I've changed your code to the following:

<!DOCTYPE html>
<html>
<body>

<form>
  Search<br>
  <input type="text" id="searchField" onKeyDown="if(event.keyCode==13){console.log('Hello World from Input'); return false;}">
  <br>
  <button type="button" id="myButton" onClick="console.log('Hello World from Button')">Search</button>
</form>
</body>
</html>

Pressing enter while the input element has the focus gives me only Hello World from Input at the console.

answered Oct 28, 2015 at 16:18

Stefan Braun

4004 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user5496018 · Accepted Answer · 2015-10-28 16:22:14Z

1

I think this is what you are asking for: https://jsfiddle.net/7vf9pz8u/1/

HTML

<form>Search
    <br>
    <input type="text" id="searchField" onKeyDown="pressEnter()">
    <br>
    <button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>

JavaScript

function pressEnter() {
    if (event.keyCode == 13) {
        alert("working");
    }
}

answered Oct 28, 2015 at 16:22

user5496018

1 Comment

Arman21 Over a year ago

Something like that just even if I handle it with two functions both getting called. As I used Google I saw an article which said if they use the keyDown within the textfield it clicking also the first button in the form

Kishore Sahasranaman · Accepted Answer · 2015-10-28 16:37:42Z

1

Handle the onKeyDown separately in a function (onEnter) and use event.preventDefault(); block the default action.

See the below code.

window.onEnter = function () {
    if (event.keyCode == 13) {
        event.preventDefault();
        return false;
    }
}

<form>
  Search<br>
  <input type="text" id="searchField" onKeyDown="onEnter()">
  <br>
  <button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>

http://jsfiddle.net/kishoresahas/cvyzLdy8/

answered Oct 28, 2015 at 16:37

Kishore Sahasranaman

4,2504 gold badges27 silver badges52 bronze badges

2 Comments

Arman21 Over a year ago

Strange your example working perfeclty as it should. Mine doesn't even just got an alert in myFunc()

Kishore Sahasranaman Over a year ago

but in my example I have defined onEnter function . do u mean that ?

Igor Iakymenko · Accepted Answer · 2015-10-28 16:30:18Z

0

I think you should prevent form submitting by event.preventDefault() in onkeydown function.

answered Oct 28, 2015 at 16:30

Igor Iakymenko

113 bronze badges

Comments

alexscjava · Accepted Answer · 2015-10-28 16:30:36Z

0

I have tested your code in chrome and firefox browser and it is working perfectly as you wish, I make some update in your code to show that it is actually working fine. Follows:

<!DOCTYPE html>
<html>
<body>
<script>
function myFunc(){
    alert("Typed text.: "+document.getElementById("searchField").value) 
}
</script>
<form>
  Search<br>
  <input type="text" id="searchField" onKeyDown="if(event.keyCode==13) myFunc()">
  <br>
  <button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
</body>
</html>

answered Oct 28, 2015 at 16:30

alexscjava

511 silver badge9 bronze badges

Collectives™ on Stack Overflow

HTML onKeyDown-Event calling function and button-click

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related