Question

我想在输入填充时启用我的按钮。我想用纯Javascript来做。

我在HTML中的代码示例：

<form action="sent.php" method="post" name="frm">
  <input type="text" name="name_input" id="name" onkeyup="myFunction()"><br>
  <button type="submit" class="button button-dark" id="send">Send message</button>
</form>

和Javascript：

document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('send').disabled = "true";
    function myFunction() {
        var nameInput = document.getElementById('name').value;
        if (!nameInput === "") {
            document.getElementById('send').disabled = "false";
        } 
    }
});

我不知道为什么我的按钮在填充输入内容后没有改变以启用状态。我尝试过不同的方法，但它仍然无法正常工作。请帮忙。

Answer 1

仅当disabled属性不存在时，才会启用HTML中的输入元素。

在您的情况下，disabled始终存在于您的元素中，只是它有一个＆＃34; false＆＃34;或者＆＃34; true＆＃34;价值 - 但根据规格（http://www.w3schools.com/tags/att_input_disabled.asp）

，这是毫无意义的

所以你需要完全删除它：

 document.getElementById('send').removeAttribute('disabled')

Answer 2

您的代码存在的问题是myFunction()不可用，因为您在eventlistener中将其定义为click。

完整的重构代码答案：

HTML

<form action="sent.php" method="post" name="frm">
    <input type="text" name="name_input" id="name">
    <br>
    <button type="submit" class="button button-dark" id="send" disabled>Send message</button>
</form>

JS

document.getElementById("name").addEventListener("keyup", function() {
    var nameInput = document.getElementById('name').value;
    if (nameInput != "") {
        document.getElementById('send').removeAttribute("disabled");
    } else {
        document.getElementById('send').setAttribute("disabled", null);
    }
});

Answer 3

尝试这个适用于你的

 function myFunction() {
            document.getElementById('send').disabled = true;
            var nameInput = document.getElementById('name').value;
            if (nameInput != "") {
            alert("Empty");
                document.getElementById('send').disabled = false;
            }
    }

如果要检查输入不应该包含数字那么我们可以使用isNaN（）函数，如果number不是数字则返回true，否则返回false

Answer 4

您的代码几乎正确，但您已在块中定义myFunction，因此input无法在myFunction()

中找到onkeyup="myFunction()"

所以在DOMContentLoaded事件

之外保持不变

参见 demo

document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('send').disabled = "true";
});
function myFunction() {
    var nameInput = document.getElementById('name').value;
    console.log(nameInput);
    if (nameInput === "") {
        document.getElementById('send').disabled = true;
    } else {
        document.getElementById('send').disabled = false;
    }
}

Javascript - 填写输入时启用按钮

4 个答案: