所以我尝试使用 JQuery、JavasScript 和 HTML 创建一个待办事项列表。我无法弄清楚如何在按下回车键时添加添加按钮(将任务添加到列表中)。我在网上尝试了多种方法，例如使用 (keyCode == 13) 的 if 语句等等。
我已附上我的 HTML 和 JavaScript 文件。
function addListItem(){
var text = $("#new-text").val();
$("#todolist").append('<li><input type="checkbox" class="done" /> '+text+' <button class="delete">Delete</button></li>');
$("#new-text").val(' ');
}
function deleteItem(){
if($(this).parent().css('textDecoration') == 'line-through' ) {
$(this).parent().remove();
}else{
$(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() {
$("#add").on('click', addListItem);
$(document).on('click', '.delete', deleteItem);
$(document).on('click', '.done', finishItem);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="TodoListJquery.js"></script>
</head>
<body>
<h1>To-Do List</h1>
<ul id="todolist">
<li><input type="checkbox" class="done"/> Clean house <button class = "delete">Delete</button></li>
<li><input type="checkbox" class="done"/>Buy milk <button class = "delete">Delete</button></li>
</ul>
<input type="text" id="new-text" /><button id="add">Add</button>
</body>
</html>请帮忙!
最佳答案
1.添加 jQuery 库(您的代码中缺少它)
2.在text-box上添加keydown事件监听器并检查是否按下了Enter键？如果是，则调用addListItem()函数
只需在 $(function(){..}); 中添加以下代码
$('#new-text').keydown(function(e){
if(e.keyCode === 13){
addListItem();
}
});
工作片段:-
function addListItem(){
var text = $("#new-text").val();
$("#todolist").append('<li><input type="checkbox" class="done" /> '+text+' <button class="delete">Delete</button></li>');
$("#new-text").val(' ');
}
function deleteItem(){
if($(this).parent().css('textDecoration') == 'line-through' ) {
$(this).parent().remove();
}else{
$(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() {
$('input[type=text]').keydown(function(e){
if(e.keyCode === 13){
addListItem();
}
});
$("#add").on('click', addListItem);
$(document).on('click', '.delete', deleteItem);
$(document).on('click', '.done', finishItem);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="TodoListJquery.js"></script>
</head>
<body>
<h1>To-Do List</h1>
<ul id="todolist">
<li><input type="checkbox" class="done"/> Clean house <button class = "delete">Delete</button></li>
<li><input type="checkbox" class="done"/>Buy milk <button class = "delete">Delete</button></li>
</ul>
<input type="text" id="new-text" /><button id="add">Add</button>
</body>
</html>关于javascript - jQuery 输入键，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52473398/