how do I get javascript function to run on enter key, as opposed to click?

Question

When I click this button, it runs the function and all is well.

<input id="input_listName" /><button id="btn_createList">add</button>

when I click it, it runs this:

$('#btn_createList').click(function(){
    $('.ul_current').append($('<li>', {
         text: $('#input_listName').val()
    }));
});

When I press it, it appends the value in the input to the <li> element.

How do I redo this so that instead of running function on click, the function runs when I click the 'enter key'?

I'd like to hide the submit key all together. Please note, there are no form tags around input and submit, as this is an API app and I'm just trying to filter and not really submit anything.

That code shouldn't run on click, it runs when you type something. — Barmar, Nov 08 '20 at 03:44
Use a `keypress` listener on the `#input_listName` element. It should check the keycode to see if it's the Enter key. — Barmar, Nov 08 '20 at 03:45
Does this answer your question? [Make button respond to the Enter Key](https://stackoverflow.com/questions/52211240/make-button-respond-to-the-enter-key) — kmoser, Nov 08 '20 at 03:46

score 3 · Answer 1 · answered Nov 08 '20 at 04:11

Don't.

You have a form. Treat it as such.

document.getElementById('input_listName').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const li = document.createElement('li');
  li.append(this.listName.value);
  document.querySelector(".ul_current").append(li);
  
  // optionally:
  // this.listName.value = ""
}, false);

<form id="input_listName">
  <input type="text" name="listName" />
  <button type="submit">add</button>
</form>
<ul class="ul_current"></ul>

Making it a form provides all of the benefits that a browser does for you. On desktop, you can press Enter to submit it. On mobile, the virtual keyboard may also provide a quick-access submit button. You could even add validation rules like required to the <input /> element, and the browser will handle it all for you.

s.kuznetsov · Answer 2 · 2020-11-08T04:03:53.990

0

With the help of the event, you can catch the pressed enter (keycode = 13) key, as in my example.

Was it necessary?

$('#btn_createList').keypress(function(event){
   if (event.keyCode == 13) {
    $('.ul_current').append($('<li>', {
         text: $('#input_listName').val()
    }));
    }
});

edited Nov 08 '20 at 04:03

answered Nov 08 '20 at 03:52

s.kuznetsov

14,870
3
10
25

score 0 · Answer 3 · answered Nov 08 '20 at 03:53

I think what you want is a check for which key was pressed, correct?

To do that, you simply need to check for event.keyCode === 13

So your code would be something similar to the following:

$('#btn_createList').keypress(function(event){
    if (event.keyCode === 13) {
         $('.ul_current').append($('<li>', {
             text: $('#input_listName').val()
         }));
    }    
});

Hopefully that does the trick!

score 0 · Answer 4 · edited Nov 08 '20 at 04:51

<input id="input_listName" /><button id="btn_createList">add</button> this syntax is technically wrong, your tag is starting with <input> and ending with </button>. Also you can add a simple check to your function that if user haven't entered anything into the input field that should return nothing.

you can also have a look at this cheat sheet to know more about keycodes https://css-tricks.com/snippets/javascript/javascript-keycodes/

$('#btn_createList').keypress(function(event){
  if($('#input_listName').val()) {
    if (event.keyCode == 13) {
    $('.ul_current').append($('<li>', {
         text: $('#input_listName').val()
    }));
    }
  }
});

<div id="btn_createList">
  <input id="input_listName" type="text">
  <ul class="ul_current">
  </ul>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>

how do I get javascript function to run on enter key, as opposed to click?

4 Answers4