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()"它有效，但仅适用于模糊(焦点变化)...