(JavaScript & HTML) Как настроить таргетинг на определенный тег ввода с помощью JavaScript

Question

Я создаю расширение Chrome, которое позволяет пользователю создавать список задач. Прямо сейчас я позволил пользователю иметь возможность вводить любую задачу, которую он хочет. У меня есть JavaScript, который вызывает функцию, когда вы нажимаете клавишу «Ввод» на клавиатуре. Однако я хочу, чтобы пользователь мог вызывать эту функцию только при создании новой задачи. Поэтому мне было интересно, как настроить таргетинг на определенный тег в моем HTML-коде с помощью Javascript.

Это код Javascript, который я пробовал:

$("input[newtsak][name$='newtask']").onload = function(){
    window.addEventListener("keydown", function(e){
       if(e.keyCode == 13){
          alert('hello')}})
 }

Оригинальный код:

HTML:

<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">

JS:

 window.onload = function(){
    window.addEventListener("keydown", function(e){
       if(e.keyCode == 13){
          alert('hello')}})
 }

Answer 1

вы должны позволить элементу input прослушивать событие keydown, а не window.
попробуй это .

$(function(){
    $("input[name$='newtask']").on('keydown', function(e){
        if (e.keyCode === 13) {
            alert(123)
        }
    })
})

Answer 2

С помощью строки селектора синтаксис [newtsak] выбирает элемент с атрибутом , равным newtsak, например, <input newtsak>.

Поскольку у вашего ввода есть идентификатор, а идентификаторы уникальны в документе (или, по крайней мере, должно быть), рассмотрите возможность использования этого идентификатора, чтобы выбрать его, и прослушивайте событие, вызванное keydown на элементе.

Вы также должны использовать $(() => { для ожидания готовности DOM, а не $(someElement).onload:

$(() => {
  $('#newtask').on('keydown', (e) => {
    if(e.keyCode == 13){
      console.log('enter pressed');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<input placeholder="something else">

Если вы не используете атрибут name на входе для чего-то определенного, не стесняйтесь его удалять, уникального идентификатора уже достаточно для выбора элемента. type="text" и value="" также не нужны.

<input spellcheck="false" placeholder="New Task" id="newtask">