添加在javascript中添加列表的enterkeypress功能，并在todo中正确组织列表样式

Question

我想为我的 TODO 列表项目在 Javascript 中添加Enter 函数，在其中我可以按 Enter 键并且应该添加该项目，现在我只能通过添加按钮添加列表。

其次，我想通过提供一些样式来正确组织 TODO 列表的列表。现在看起来不太好。

现在我的 TODOLIST 项目看起来像这样https://i.stack.imgur.com/V1j5z.png

var add = document.getElementById('add');

var removeall = document.getElementById('removeall');

var list = document.getElementById('list');

//remove all button

removeall.onclick= function(){

    list.innerHTML= '';

}

//adding a list element

add.onclick = function(){

    addlis(list);

    document.getElementById('userinput').value= '';

    document.getElementById('userinput').focus();

    }

function addlis(targetUl){

    var inputText = document.getElementById('userinput').value;

    var li = document.createElement('li');

    var textNode= document.createTextNode(inputText + ' ');

    var removeButton= document.createElement('button');

    

    

    if(inputText !== ''){

        removeButton.className= 'btn btn-xs btn-danger';

        removeButton.innerHTML= '×';

        removeButton.setAttribute('onclick','removeMe(this)');

      

    

    li.appendChild(textNode); //onebelowanother

    li.appendChild(removeButton); 

    targetUl.appendChild(li);

} else{

    alert("Please enter a TODO");

}

}

function removeMe(item){

    var p = item.parentElement;

    p.parentElement.removeChild(p);

}

body{

    font-family: 'EB Garamond', serif;

    padding: 0;

    margin: 0;

    background-color: beige;

}

h1{

    margin: 40px;

}

#userinput{

    width: 350px;

    height: 35px;

    display: inline-block;

}

.btn{

    margin: 20px 5px;

}

.form-control{

    margin: 0 auto;

}

ul{

    list-style: none;

}

Answer 1

只需将所有inputs 和buttons包装在form标签内，如下所示：<form id="..."><input type="text" id="userinput" class="form-control" placeholder="what you need to do" onkeydown="return searchKeyPress(event);"><button type="submit" class="btn btn-success" id="add">Add a TODO</button></form>并替换它：add.onclick = function(){...})和form = document.getElementBy...form.addEventListener('submit', function() {...})还要尽量避免书写add.onclick和使用addEventListener。这样您就可以拥有多个侦听器，轻松删除它们，并且总体上拥有更多控制权。

Answer 2

使用事件监听器来监听输入中的按键（13 是回车键）：var input = document.getElementById("userinput");input.addEventListener("keyup", function(event) {&nbsp; if (event.keyCode === 13) {&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; searchKeyPress(event);&nbsp; }});