Как вызвать функцию, когда поле ввода сфокусировано и нажата клавиша ввода?

Question

Итак, у меня есть поле ввода, в которое пользователи могут вводить текст.

Есть кнопка «Добавить», которая запускает функцию addVal. В дополнение к срабатыванию функции addVal при нажатии кнопки я бы хотел, чтобы функция запускалась, если курсор находится в поле ввода, и нажата клавиша ввода.

Я могу добавить слушателей событий для onfocus или keypress, но не знаю, как объединить оба условия. Любые советы по лучшему методу или logi c для достижения этого с помощью только 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...
}

Я пробовал

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

на ответ здесь: Нажать кнопку JavaScript на клавишу Enter в текстовом поле , но поле ввода перестало принимать текст.

Answer 1

Итак, чтобы запускать событие всякий раз, когда вы помещаете курсор в поле ввода, вам необходимо добавить событие onblur в поле ввода -

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

Answer 2

Поместите все в форму

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>

Answer 3

Это потому, что вы предотвращаете действие по умолчанию перед проверкой нажатия ключевого элемента . Чтобы это работало. Также в вашем случае я не могу понять, используете ли вы form или что-то в этом роде, поэтому, если вы вообще не используете form, вы не можете предотвратить там какое-либо событие.

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>

Но если вы хотите использовать form, чтобы обернуть ваши элементы внутрь, вы можете сделать это, добавив type="button".

Это должно быть сделано следующим образом:

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>