javascript keypress multiple records problems

Question

I would like to ask why it will have multiple response? How can i enter the input field with just one response?

Expectation : Input the data in input field and press the enter , it will execute the actions.

$("#textInput").keypress(function (e) {

  console.log("123");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<input type='text' id='textInput'/>

Possible duplicate of [jQuery keypress event fires repeatedly when key is held - but not on all keys](https://stackoverflow.com/questions/9098168/jquery-keypress-event-fires-repeatedly-when-key-is-held-but-not-on-all-keys) — halfpastfour.am, May 27 '17 at 15:44

score 3 · Answer 1 · answered May 27 '17 at 15:49

You have syntax error in you code. closing should be }); instead of )};

$("#textInput").keypress(function (e) {
     if(e.which == 13) {
        alert('You pressed enter!');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textInput">

score 0 · Answer 2 · edited Sep 19 '17 at 00:56

The keypress event is sent to an element when the browser registers keyboard input.

— jQuery Documentation link

What you really want is .submit() as they are the one that will only be triggered when the user submits info.

$("#textInput").submit(function (e) {

console.log("123");
)};

Or if you only want to detect enter keypress but not submit, use this:
How to detect pressing Enter on keyboard using jQuery?

ubm · Answer 3 · 2017-05-27T16:00:56.320

I think, you should have choose other event,like onblur to fix your problem

$("#textInput").on('blur',function (e) {

  console.log("123");
)};

In your code ,keypress events gives you output,in every keypress action,So this is the reason you got multiple responses

And next,if you think,if you want to press Enter button then need response,In this case little changes will helps you

    $("#textInput").keypress(function (e) {
     if(e.which == 13) {
        console.log("123");
    }


});

score 0 · Answer 4 · answered May 27 '17 at 15:59

Expectation : Input the data in input field and press the enter , it will execute the actions.

In order to submit the corresponding form as soon as the user enters a text string and a final enter key you can:

test if current char is the enter key (e.which == 13)
get the closest form
submit the form

$("#textInput").on('keypress', function (e) {
    if (e.which == 13) {
        $(this).closest('form').submit();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action="/action_page.php">
    Enter text and type enter to submit:<br>
    <input type="text" name="textInput" value="">
</form>

javascript keypress multiple records problems

4 Answers4