How to press enter in input type text call function javascript by not submit form?

Question

How to press enter in input type text call function javascript by not submit form ?

When fill data into input type text and press enter keyboard i want only to call function detect_enter_keyboard(event) by not to submit form.

How can i do that ?

https://jsfiddle.net/atuyx7qc/

<form>
<input type="text" name="user" onkeypress="detect_enter_keyboard(event)">
<input name="btnLogin" onclick="test_fn();" type="button" value="Send">
</form>

<script>
function detect_enter_keyboard(event) {
    var key_board_keycode = event.which || event.keyCode;
    if(key_board_keycode == 13)
    {
        test_fn();
    }
}
</script>

<script>
function test_fn(){
alert("555555");
}
</script>

LostMyGlasses · Accepted Answer · 2016-02-08 13:29:25Z

2

With preventDefault(). Add this line after if(key_board_keycode == 13):

event.preventDefault();

edited Feb 8, 2016 at 13:29

answered Feb 8, 2016 at 13:22

LostMyGlasses

3,17423 silver badges29 bronze badges

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

2 Comments

mongmongmong seesee Over a year ago

by this way, I can not fill data into input.

LostMyGlasses Over a year ago

@mongmongmongseesee Right, then you need to place the preventDefault() right after detecting if the pressed key is enter. I updated the answer.

Gomzy · Accepted Answer · 2016-02-08 13:29:44Z

1

use this

function detect_enter_keyboard(event) {

    var key_board_keycode = event.which || event.keyCode;
    if(key_board_keycode == 13)
    {
        event.preventDefault();
        test_fn();
    }
}
function test_fn(){
    alert("555555");
}

<form >
<input type="text" name="user" onkeypress="detect_enter_keyboard(event)">
<input name="btnLogin" onclick="test_fn();" type="button" value="Send">
</form>

answered Feb 8, 2016 at 13:29

Gomzy

4314 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to press enter in input type text call function javascript by not submit form?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related