CODEWITHSUNDEEP
javascripthtmlevents
Tzvi2
Tzvi2

Reputation: 182

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

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

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.

Upvotes: 0

Views: 3809

Answers (3)

SMAKSS
SMAKSS

Reputation: 10520

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>

Upvotes: 0

Gauri Shankar Gupta
Gauri Shankar Gupta

Reputation: 139

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>

Upvotes: 1

Aks Jacoves
Aks Jacoves

Reputation: 877

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>

Upvotes: 0

Related Questions