Question

我正在创建一个待办事项列表，并希望为用户提供两种向列表添加项目的方法。第一种是在“inItemText”输入字段中输入数据时按ENTER键。第二个是点击“btnAdd”按钮。

我已经能够按下按钮了。但是，我无法让ENTER键工作。

另外，我想在编辑按钮中添加功能......任何建议都会有所帮助！

<body>

  <h1>To Do List</h1>

  <div>
    <input type="text" id="inItemText">
    <button id="btnAdd">Add</button>
  </div>

  <ul id="todoList"></ul>

</body>

JS

function addListItem(){
    var text = $("#inItemText").val();
    $("#todoList").append("<li><input type='checkbox' class='done' />" + text + "<button class='delete'>Delete</button><button class='edit'>Edit</button></li>");
    $("#inItemText").val("");
    $("#inItemText").focus();
}
function deleteItem(){
    $(this).parent().remove();
}

function finishItem(){
    if($(this).parent().css('textDecoration') === 'line-through'){
        $(this).parent().css('textDecoration', 'none');
    }
    else{
        $(this).parent().css('textDecoration', 'line-through');
    }
}

$(function(){
    inItemText.focus();
    $("#btnAdd").on('click', addListItem);

    $(document).on('click','.delete',deleteItem)
    $(document).on('click','.done',finishItem)
});

Answer 1

你可以这样做

$('#inItemText').keydown(function(e) {
  if (e.which == 13) {
    addListItem();
  }
});

Answer 2

只要输入密钥的addListItem事件发生，您就可以致电keyup

$('#inItemText').keyup(function(e) {
  if (e.keyCode == 13) {
    addListItem();
  }
});

点击并输入按钮

2 个答案: