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.

Answer 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>

Answer 2

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>

Answer 3

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>