(JavaScript & HTML)如何通过 JavaScript 定位特定的输入标签

Question

我正在创建一个Chrome扩展名，允许用户创建待办事项列表。现在，我允许用户能够输入所需的任何任务。当您按键盘上的" Enter"键时，我的JavaScript调用功能。但是，我只希望用户只能在创建新任务时调用此功能。因此，我想知道如何使用JavaScript在我的HTML代码中定位特定标签。

这是我尝试的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

在选择器字符串的情况下，语法[newtsak]选择具有属性的元素 newtsak，eg <input newtsak>。

因为您的输入具有ID，并且ID在文档中是唯一的(或者，至少应应该 BE(，请考虑仅使用该ID来选择它，然后聆听在AT上发射的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属性以进行特定的内容，否则请随时删除它，唯一的ID已经足以选择元素。type="text"和value=""也不需要。

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

Answer 2

您应该让input元素收听键盘事件，而不是窗口。
尝试这个 。

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