How to trigger a function when input field is focused and enter key is pressed?

Question

So I have an input field where users can enter text.

There's an 'Add' button which triggers an addVal function. In addition to triggering the addVal function when the button is pressed, I'd like the function to be triggered if the cursor is in the input field, and the enter key is pressed.

I'm able to add event listeners for either 'onfocus' or 'keypress' but not sure how to combine both conditions. Any advice on the best method or logic to achieve this with just JS/HTML?

HTML:

  <label for="numAdder">Type a number here.</label>
  <input type="text" id="numAdder" name="numAdder">

JavaScript:

const numField = document.getElementById('numAdder');
const addNumBtn = document.getElementById('addBtn');

addNumBtn.addEventListener('click', addVal);

function addVal(){
  do stuff...
}

I've tried

numField.addEventListener('keypress', function(e){
  e.preventDefault();
  if(e.key==='Enter'){
    addVal();
  }
})

per an answer here: Trigger a button click with JavaScript on the Enter key in a text box but the input field stopped accepting text.

Does this answer your question? [Enter key press event in JavaScript](https://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript) — devlin carnate, Jun 16 '20 at 18:05
Don't think so, that question doesn't take into account cursor/focus. — Tzvi2, Jun 16 '20 at 18:09
just fyi: It doesn't appear from your question that your problem is with how to capture the event, but with how to detect the enter key, which is what the link above answers. — devlin carnate, Jun 16 '20 at 19:16

score 1 · Answer 1 · answered Jun 16 '20 at 18:16

1

So In order to fire a event whenever you place your cursor in the input field, you need to add a onblur event to the input field-

<script>
    inputfield = document.getElementById("numAdder");
    inputfield.onblur = function(){
        console.log("Event Triggered");
        // Whatever you want to do here 
    }
</script>

answered Jun 16 '20 at 18:16

Gauri Shankar Gupta

139
5

Did you try this, OnBlur is the best event which gets fired up whenever cursor position changes in the input field. – Gauri Shankar Gupta Jun 16 '20 at 18:26
Yep, with this code the function is triggering when I click in the input field and then out of it. – Tzvi2 Jun 16 '20 at 18:56

SMAKSS · Accepted Answer · 2020-07-01T18:59:35.450

This is because you are preventing the default action before checking the key element get pressed. To make it work. Also in your case, I can't see if you are using form or something, so if you are not using form at all you may not prevent any event there.

const numField = document.getElementById('numAdder');
const addNumBtn = document.getElementById('addBtn');

addNumBtn.addEventListener('click', addVal);

function addVal() {
  console.log('addVal called');
}

numField.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    addVal();
  }
})

<label for="numAdder">Type a number here.</label>
<input type="text" id="numAdder" name="numAdder">
<button id="addBtn">add</button>

But if you want to use form to wrap your elements inside it you can do that by adding the type="button".

This is should be done like this:

const numField = document.getElementById('numAdder');
const addNumBtn = document.getElementById('addBtn');

addNumBtn.addEventListener('click', addVal);

function addVal() {
  console.log('addVal called');
}

numField.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    addVal();
  }
})

<form>
  <label for="numAdder">Type a number here.</label>
  <input type="text" id="numAdder" name="numAdder">
  <button id="addBtn" type="button">add</button>
</form>

score 0 · Answer 3 · answered Jun 16 '20 at 18:06

Put everything inside a form

let form = document.querySelector('form')

form.addEventListener('submit', event => {
  event.preventDefault()
  addVal()
})

function addVal(){
  console.log('addVal()')
}

<form>
  <label for="numAdder">Type a number here.</label>
  <input type="text" id="numAdder" name="numAdder">
  <button type="submit">Add</button>
</form>

How to trigger a function when input field is focused and enter key is pressed?

3 Answers3