javascript enable a disabled textbox after a while

问题

I've been trying all sorts of things and looking for an answer. I found some but they don't work for some strange reason.

I'm using a txt document to store an array and using ajax to GET from it. It works that after you failed 3 attempts it disables the fields, but how do I make it so that after 10 seconds it enables again?

This is my javascript code:

else {
    attempt--; // Decrementing by one.
    alert("You have left " + attempt + " attempt;");
    document.getElementById("password").value = '';
    // Disabling fields after 3 attempts.
    if (attempt == 0) {
        function disablePsw() {
            document.getElementById("username").disabled = true, 5000;
            document.getElementById("password").disabled = true, 5000;
            document.getElementById("submit").disabled = true, 5000;
            return true;
        }
    }
}

<div class="container">
    <div class="main">
        <h2>Login</h2>
        <form id="form_id" method="post" name="myform">
            <label>User Name :</label>
            <input type="text" name="username" id="username" />
            <label>Password :</label>
            <input type="password" name="password" id="password" />
            <input type="button" value="Login" id="submit" onclick="validate()" />
        </form>
        <span><b class="note">Note : </b>Have you forgotten your password? Request new password. <br/>
    </div>
</div>

回答1:

Try this:

Use setTimeout() to enable button after given time:

function disablePsw() {
    document.getElementById("username").disabled = true;
    document.getElementById("password").disabled = true;
    document.getElementById("submit").disabled = true;

    setTimeout(function() { // it will automatically execute and enable all button after 10 seconds
        document.getElementById("username").disabled = false;
        document.getElementById("password").disabled = false;
        document.getElementById("submit").disabled = false;
    }, 10000); 

    return true;
}

回答2:

You can define the function outside, then call it to disable. after that setTimeout to enable again.

else {
    attempt--; // Decrementing by one.
    alert("You have left " + attempt + " attempt;");
    document.getElementById("password").value = '';
    // Disabling fields after 3 attempts.
    if (attempt == 0) {
        togglePsw(true);
        setTimeout(function(){
            togglePsw(false)
        }, 5000)
    }
}

function togglePsw(c) {
    document.getElementById("username").disabled = c;
    document.getElementById("password").disabled = c;
    document.getElementById("submit").disabled = c;
    return true;
}

回答3:

setTimeout(function(){
    $("#username").prop('disabled', false);
    $("#password").prop('disabled', false);
    $("#submit").prop('disabled', false);
},10000);

来源：https://stackoverflow.com/questions/37592903/javascript-enable-a-disabled-textbox-after-a-while

标签

javascript

jquery

ajax