将任务添加到任务列表后禁用按钮
[英]Disable button after adding task to task list
问题描述
I would like to add some items to task list and disable button each time. 
我想每次将一些项目添加到任务列表并禁用按钮。 When page loads it works fine. 页面加载时工作正常。
I'd like to also disable button after adding each task. 添加每个任务后，我也想禁用按钮。
If you add a new task and press submit button it works fine. 如果添加新任务，然后按提交按钮，则可以正常工作。 But if the user choose pressing 'Enter' button instead of submit it becomes enabled. 但是，如果用户选择按“ Enter”按钮而不是提交按钮，则启用该功能。
What should it be done to disable submit button if the user prefers 'Enter' button instead of submit button ? 如果用户更喜欢“输入”按钮而不是“提交”按钮，应该如何禁用“提交”按钮？
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
// By default, submit button is disabled
document.querySelector('#submit').disabled = true;
// Enable button only if there is text in the input field
document.querySelector('#task').onkeyup = () => {
document.querySelector('#submit').disabled = false;
};
document.querySelector('#new-task').onsubmit = () => {
// Create new item for list
const li = document.createElement('li');
li.innerHTML = document.querySelector('#task').value;
// Add new item to task list
document.querySelector('#tasks').append(li);
// Clear input field and disable button again
document.querySelector('#task').value = '';
document.querySelector('#submit').disabled = true;
// Stop form from submitting
return false;
};
});
</script>
<title>Tasks</title>
</head>
Body part of the html. html的主体部分。
<body>
<h1>Tasks</h1>
<ul id="tasks">
</ul>
<form id="new-task">
<input id="task" autocomplete="off" autofocus placeholder="New Task" type="text">
<input id="submit" type="submit">
</form>
</body>
</html>
3 个解决方案
解决方案1
2 已采纳 2018-11-10 14:31:23
When you click the enter button, your onkeyup event handler changes the submit button disabled state to false , and the enter works. 当您单击enter按钮时，您的onkeyup事件处理程序将onkeyup Disabled状态更改为false ，并且enter起作用。
Instead, listen to the input event of the #task box, and enable/disable the submit button according to the changes in the content. 相反，请侦听#task框的input事件，然后根据内容的更改启用/禁用提交按钮。 This will also handle the case in which submit is enabled after the text was deleted. 这也将处理删除文本后启用提交的情况。
// Enable button only if there is text in the input field
document.querySelector('#task').addEventListener('input', (e) => {
document.querySelector('#submit').disabled = e.target.value === '';
});
Example: 例：
// By default, submit button is disabled document.querySelector('#submit').disabled = true; // Enable button only if there is text in the input field document.querySelector('#task').addEventListener('input', (e) => { document.querySelector('#submit').disabled = e.target.value === ''; }); document.querySelector('#new-task').onsubmit = () => { // Create new item for list const li = document.createElement('li'); li.innerHTML = document.querySelector('#task').value; // Add new item to task list document.querySelector('#tasks').append(li); // Clear input field and disable button again document.querySelector('#task').value = ''; document.querySelector('#submit').disabled = true; // Stop form from submitting return false; };
#submit:disabled { opacity: 0.5; }
<h1>Tasks</h1> <ul id="tasks"> </ul> <form id="new-task"> <input id="task" autocomplete="off" autofocus placeholder="New Task" type="text"> <input id="submit" type="submit"> </form>
解决方案2
1 2018-11-10 14:32:04
When you press enter key the event listner keyup is firing. 当您按下enter键事件听者keyup被解雇。 You have to put the enable of button here in conditions 您必须在此处将启用按钮的条件
document.querySelector('#task').onkeyup = (e) => {
if(e.which === 13){
return; // When user enter key press
}
document.querySelector('#submit').disabled = false;
};
解决方案3
0 2018-11-11 06:43:42
I was watching Harvard CS50 Web Programming Course and I'd like to share another solution. 我正在看哈佛CS50网络编程课程，我想分享另一个解决方案。 This is not a part of homework, assignment etc. so I feel free to share solution. 这不是家庭作业，任务等的一部分，因此我随时可以分享解决方案。
Basically we enable button if there is text in the input field. 基本上，如果输入字段中有文本，则启用按钮。
// Enable button only if there is text in the input field
document.querySelector('#task').onkeyup = () => {
if (document.querySelector('#task').value.length > 0)
document.querySelector('#submit').disabled = false;
else
document.querySelector('#submit').disabled = true;
};
// By default, submit button is disabled document.querySelector('#submit').disabled = true; // Enable button only if there is text in the input field document.querySelector('#task').onkeyup = () => { if (document.querySelector('#task').value.length > 0) document.querySelector('#submit').disabled = false; else document.querySelector('#submit').disabled = true; }; document.querySelector('#new-task').onsubmit = () => { // Create new item for list const li = document.createElement('li'); li.innerHTML = document.querySelector('#task').value; // Add new item to task list document.querySelector('#tasks').append(li); // Clear input field and disable button again document.querySelector('#task').value = ''; document.querySelector('#submit').disabled = true; // Stop form from submitting return false; };
#submit:disabled { opacity: 0.5; }
<h1>Tasks</h1> <ul id="tasks"> </ul> <form id="new-task"> <input id="task" autocomplete="off" autofocus placeholder="New Task" type="text"> <input id="submit" type="submit"> </form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.