如何在动态创建的输入标签上捕获“输入”键 - Vanilla JS

如何解决如何在动态创建的输入标签上捕获“输入”键 - Vanilla JS

我有一个动态创建的输入标签。我想听听它的回车键 keyup。我在互联网上搜索，只找到了 JQUERY 解决方案。我更喜欢 Vanilla Javascipt。

我尝试了下面的代码，这似乎不起作用，因为我无法选择特定元素

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

    if (event.keyCode === 13) {

    }
});

谢谢，罗伯·威尔逊

解决方法

你需要做两件事：

1. 将事件侦听器添加到输入的容器中：表单、div、文档等...
2. 在侦听器内，检查回车键和预期的类

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>

,

请看这里：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