Question

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

HTML：

/bin/env "LD_PRELOAD=..." target-prog args

Javascript：

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

Answer 1

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

$(() => {
  $('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>

Answer 2

使用香草javascript，您只需将eventListener添加到实际的输入元素收听keydown事件。

let tasks = document.getElementById('tasksUL');
document.getElementById('newtask').addEventListener('keydown', (e) => {
    if(e.key == 'Enter'){
        let new_item = document.createElement('li');
        new_item.innerText = e.target.value;
        tasks.appendChild(new_item);
    }
});

Answer 3

我想您希望您的列表包含用户输入的文本吗？您可以使用jQuery append 方法来实现。

$('#newtask').keydown(function(e){
    if (e.which == 13) {
        //Construct some html to append:
        var newLi = "&lt;li&gt;" + $('#newtask').val() + "&lt;/li&gt;";
        $('#tasksUL').append(newLi);
    }
});

尝试我的JS Fiddle implementation

当用户按下“ Enter”键（HTML和Javascript）时创建新行

3 个答案: