我目前正在使用HTML、CSS和JavaScript開發一個待辦事項列表應用程序。我有一個文本輸入字段,用戶可以在其中輸入他們的任務,還有一個& quot添加任務& quot按鈕將任務添加到列表中。但是,我希望通過允許用戶只需按下鍵盤上的回車鍵就可以添加任務來改善用戶體驗。
如何在我的應用程序中實現這一功能?我應該使用什么特定的事件偵聽器或按鍵代碼來檢測Enter鍵的按下并觸發任務添加功能?此外,我如何確保在添加任務后輸入字段被清除?
我將非常感謝任何指導,代碼片段,或建議的方法來完成這一功能。提前感謝您的幫助!
我只能通過點擊按鈕來添加它們
要允許用戶通過按Enter鍵來添加任務,您可以向輸入字段添加一個事件偵聽器來偵聽& quot按鍵& quot事件。當按下Enter鍵時,您可以調用將任務添加到列表中的函數。
下面的代碼將告訴你如何完成你的任務
<input type="text" id="taskInput">
<button id="addTaskBtn">Add Task</button>
<script>
const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTaskBtn");
taskInput.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
addTask();
}
});
addTaskBtn.addEventListener("click", function() {
addTask();
});
function addTask() {
const task = taskInput.value;
if (task.trim() !== "") {
// Add task to the list
console.log("Task added:", task);
taskInput.value = "";
}
}
</script>
const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTaskBtn");
taskInput.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
addTask();
}
});
addTaskBtn.addEventListener("click", function() {
addTask();
});
function addTask() {
const task = taskInput.value;
if (task.trim() !== "") {
// Add task to the list
console.log("Task added:", task);
taskInput.value = "";
}
}
<input type="text" id="taskInput">
<button id="addTaskBtn">Add Task</button>