Question

只要用户输入文本，我就会尝试在JavaScript中启用按钮。这段代码出了什么问题？是因为使用了fieldset？

function setText() {
  var x = document.getElementById("mail").value;
  if (x != "") {
    document.getElementById("btn").disabled = 'false';
  }
}

<form>
  <fieldset id="file1">
    <legend><img src="fb-login.png" height="70" width="70" /> :</legend>

    Email: <input id="mail" type="email" onchange="setText()"><br> password: <input type="password"><br><br>
    <input type="submit" id="btn" value="ok" disabled> <br>
  </fieldset>
</form>

Answer 1

下面是正确的方法，而不是使用onchange，你应该使用oninput / onkeyup：

 function setText(){
  var x=document.getElementById("mail").value.trim();
  if(x !=""){
  document.getElementById("btn").disabled = false;
      }
  else{
  document.getElementById("btn").disabled = true;
      }
    }

 <form>
  <fieldset id="file1">
    <legend><img src="fb-login.png" height="70" width="70"/> :</legend>

       Email: <input id="mail" type="email" onkeyup="setText()"><br>
      password: <input type="password"><br><br>
     <input type="submit" id="btn" value="ok"  disabled> <br>
   </fieldset>
 </form>

<强>更新

下面的@mplungjan给出了一个较短的方法：

function setText() {
  document.getElementById("btn").disabled = document.getElementById("mail").value.trim()=="";
}

Answer 2

首先，使用oninput事件而不是onchange来绑定输入事件。然后，false是JavaScript中的布尔关键字，而不是字符串。这是一个有效的例子：

function setText() {
  var x = document.getElementById("mail").value.trim();
  document.getElementById("btn").disabled = x == "";
}

<form>
  <fieldset id="file1">
    <legend><img src="fb-login.png" height="70" width="70" /> :</legend>

    Email:
    <input id="mail" type="email" oninput="setText()">
    <br> password:
    <input type="password">
    <br>
    <br>
    <input type="submit" id="btn" value="ok" disabled>
    <br>
  </fieldset>
</form>

如何在html5中通过javascript启用按钮？

2 个答案: