Question

我旁边有一个文本框和一个提交按钮。该按钮处于禁用状态。一旦用户在文本框中键入内容，就应该启用它。这工作正常。但是一旦用户开始输入，它就会启用。如果使用退格键使字段为空，则按钮仍处于启用状态。

<html>
<body> 
  <input type="text" id="fname" onkeyup="myFunction()"> 
  <input type="button" id="a" disabled = "true" value ="click me"> 
  <script> 
    function myFunction() 
    { 
      var x = document.getElementById("fname"); 
      x.value = x.value.toUpperCase(); 
      if(x.value != " ") 
      { 
        document.getElementById('a').disabled=false; 
      } 
    } 
  </script> 
</body> 
</html>

Answer 1

你应该在你的条件下加上else语句，如果textbox为空则禁止按钮。试试下面的代码。

<repositories>
    <repository>
        <id>snapshots</id>
        <name>Snapshots</name>
        <url>url/snapshots/</url>
    </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>com.my</groupId>
        <artifactId>DBAccess</artifactId>
        <version>0.0002-SNAPSHOT</version>
    </dependency>

Answer 2

你非常接近。您所要做的就是检查长度属性并添加else语句以在文本框中没有值时禁用该按钮。

<html>
<body>
<input type="text" id="fname" onkeyup="myFunction()">
<input type="button" id="a" disabled = "true" value ="click me">

<script>
function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
if(x.value.length > 0)
{
   document.getElementById('a').disabled=false;
}
else
{
  document.getElementById('a').disabled=true;
}
}
</script>
</body>
</html>

Answer 3

我建议您在HTML中使用此代码

<input type="submit" id="register" value="Register" disabled="disabled" />

并在javascript中进行以下更改

(function() {
$('form > input').keyup(function() {

    var empty = false;
    $('form > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });

    if (empty) {
        $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
    } else {
        $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
    }
});

我认为它确实很有效。希望你得到你想要的操作。谢谢。

Answer 4

您需要分别编写if else条件，Demo，并尽量避免将事件侦听器直接添加到标记中：）

$('#fname').keyup(function() {
  //console.log('wor');  
    if(!$(this).val() == '') {
        $('#a').prop("disabled", false);
    }
    else{
        $('#a').prop("disabled", true);
    }
})

Answer 5

更新您的脚本，如下所示

   function myFunction() {
        var x = document.getElementById("fname");
        x.value = x.value.toUpperCase();
        if (x.value.length != 0) {--here is the change
            document.getElementById('a').disabled = false;
        }
        else {
            alert('Empty');
            document.getElementById('a').disabled = true;
        }
    }

文本框为空时，onkeyup无法正常工作

5 个答案: