Question

我想每次将一些项目添加到任务列表并禁用按钮。页面加载后效果很好。

添加每个任务后，我也想禁用按钮。

如果添加新任务，然后按提交按钮，则效果很好。但是，如果用户选择按“ Enter”按钮而不是“提交”按钮，则会启用它。

如果用户更喜欢“输入”按钮而不是“提交”按钮，应该怎么做来禁用“提交”按钮？

<!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>

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>

Answer 1

当您单击enter按钮时，您的onkeyup事件处理程序会将“提交按钮”的禁用状态更改为false，并且输入有效。

相反，请侦听#task框的input事件，然后根据内容的更改启用/禁用“提交”按钮。这也可以处理删除文本后启用提交的情况。

// Enable button only if there is text in the input field
document.querySelector('#task').addEventListener('input', (e) => {
  document.querySelector('#submit').disabled = e.target.value === '';
});

示例：

// 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>

Answer 2

当您按下enter键时，事件列表器keyup将被触发。您必须在此处将启用按钮的条件置于

 document.querySelector('#task').onkeyup = (e) => {
                   if(e.which === 13){
                     return; // When user enter key press  
                   }
                    document.querySelector('#submit').disabled = false;
                };

Answer 3

我正在看哈佛CS50网络编程课程，我想分享另一个解决方案。这不是家庭作业，任务等的一部分，因此我可以随时分享解决方案。

如果输入字段中有文本，则基本上启用按钮。

// 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>

将任务添加到任务列表后禁用按钮

3 个答案: