javascript - 当用户按下 "Enter"键时创建一个新行(HTML 和 Javascript)

Question

我正在创建一个 Chrome 扩展程序，以便用户可以创建待办事项列表。我想让它一旦用户输入任务，用户就可以按“Enter”键提交它。这将导致任务转到下一行。我无法让用户将任务转到下一行。

HTML:

<input type="text" name="newtask" value="" spellcheck="false" placeholder="New Task" id="newtask">
<ul id="tasksUL">
  <li>test</li>
</ul>

Javascript:

$(() => {
   $('#newtask').on('keydown', (e) => {
     if(e.keyCode == 13){
       ???
     }
   });
 });

Answer 1

将 keypress 事件监听器附加到 input 元素，而不是 ul。如果按下的键是 enter，获取 input 元素的内容，创建新的 li 元素并用输入的值设置它的文本，附加到 ul 然后清除 输入元素。

$(() => {
  $('input').on('keypress', function(e) {
    if (e.keyCode == 13) {
      const newTask = $(this).val();
      if (newTask) {
        $('#tasksUL').append(`<li>${newTask}</li>`);
        $(this).val("");
      }
    }
  });
});

<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">
<ul id="tasksUL">
  <li>test</li>
</ul>