How to capture 'enter' key on dynamically created input tag - Vanilla JS

Question

I have a input tag which is created dynamically. I want to listen for it's enter key keyup. I searched the internet and found only JQUERY solutions. I prefer Vanilla Javascirpt.

I have tried the following code, which seems not to work because, Ii cant select the specific element

document.addEventListener("keyup", function(event) {

    if (event.keyCode === 13) {

    }
});

Thanks, Rob Wilson

Answer 1

You need to do two things:

1. Add the event listener to the container of the inputs: form, div, document, etc...
2. Inside the listener, check for the enter key AND the expected class

const VK_ENTER = 13;

const handleEnterKey = ({ keyCode, target }) => {
  // Only if the enter key is pressed and the target is an "enter-able" input
  if (keyCode === VK_ENTER && target.classList.contains('enter-able')) {
    console.log(target.value);
  }
};

// Add listener to the container that holds the inputs
const localScope = document.querySelector('.local-scope');
localScope.addEventListener('keyup', handleEnterKey);

// Added to document body after assigning the event listener
const input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('placeholder', 'Dynamic...');
input.classList.add('enter-able');
localScope.append(input);

.local-scope {
  display: flex;
  flex-direction: column;
}

.enter-able {
  margin-bottom: 0.5em;
}

<div class="local-scope">
  <input type="text" class="enter-able" placeholder="Static..." />
</div>

Answer 2

See here: https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event

const ENTER_BUTTON_KEY_CODE = 13;

document.addEventListener('keyup', event => {
  if (event.keyCode === ENTER_BUTTON_KEY_CODE) {
    console.log('Enter was pressed. Yay!');
  } else {
    console.error(`${event.code} was pressed.`);
  }
});

Press enter