javascript - 禁用按钮直到字段已满纯 JS

Question

在填写表单字段之前，我试图让按钮保持禁用状态，但我似乎无法做到这一点。我创建了一个只有一个字段的小示例，但原则与更大的表单相同。

有人能帮忙吗？

代码:

function checkForm() {
  var name = document.getElementById("name").value;
  var cansubmit = true;

  if (name.value.length == 0) {
    cansubmit = false;
  }

  if (cansubmit == false) {
    document.getElementById("submitbutton").disabled = true;
  }

};

<input type="text" id="name" onkeyup="checkForm()" />

<button type="button" id="myButton">Test me</button>

Answer 1

您的示例中有几个错误:

1. var name 被分配给 name 元素的值字符串，然后您检查它的 value 属性 - 该字符串没有 value 属性(property)。
2. 提交按钮的 id 是 myButton 因此使用该 id 通过 id 获取它(当设置 disabled 属性时)。
3. 您可以禁用提交按钮，直到名称输入的长度大于 0。

禁用按钮最初听起来是个好主意，对吧？

请参阅下面更正的示例:

function checkForm()
{
    var name = document.getElementById("name").value;
    var cansubmit = (name.length > 0);
    document.getElementById("myButton").disabled = !cansubmit;

};

<input type="text" id="name" onkeyup="checkForm()" />

<button type="button" id="myButton" disabled="disabled">Test me</button>

您可能还想考虑通过按键以外的方法处理更改 - 例如mouseup 等...我尝试添加 onchange="checkForm()" 并且它有效但仅适用于模糊(焦点更改)...