javascript - 每次用户尝试后刷新消息

Question

我试图在每次用户输入内容并单击输入区域时弹出成功或失败消息。这是我目前拥有的:

function checkUsername() {
    var username = document.getElementById("username").value;

    if (username.length == 0) {
        document.getElementById("username_message").className = "failure";
        document.getElementById("username_message").innerHTML = "Username is too short.";
        $("#username_message").fadeOut(3000);

    } else {
        document.getElementById("username_message").className = "success";
        document.getElementById("username_message").innerHTML = "Valid!";
        $("#username_message").fadeOut(3000);
    }

就输入字段而言，我有以下内容:

<input type="text" id="username" onblur="checkUsername()" autofocus>

当我运行此代码并单击输入字段外时，会显示错误消息，但要显示任何其他消息，我必须刷新页面。输入字段当前位于表单内，所以我想知道如何每次都显示消息，而不必刷新页面？一旦一条消息显示，另一条消息就不会显示，除非我刷新。

Answer 1

jQuerys fadeOut 方法会将不透明度淡化为 0，然后在元素上设置 display:none。您需要“扭转”这一点。

因此将函数更改为:

function checkUsername() {
    var username = document.getElementById("username").value;

    if (username.length == 0) {
        document.getElementById("username_message").className = "failure";
        document.getElementById("username_message").innerHTML = "Username is too short.";

    } else {
        document.getElementById("username_message").className = "success";
        document.getElementById("username_message").innerHTML = "Valid!";
    }
    $("#username_message").stop(true, true).show().fadeOut(3000);
}

.stop(true, true) 将立即使淡出结束，然后将不透明度设置回 1。使用 jsFiddle