jquery input输入值后自动隐藏提示框

Question

我是jquery初学者，请教各位个问题，谢谢啦！
这里id是username的input非空触发id是usernote的提示框，我想让usernote在input输入值的时候自动隐藏，我看了一堆说明，用了keyup啥的，结果不好用啊！

if(!username){
    $("#usernote").removeClass("valid-feedback");
    $("#usernote").text("请输入您的注册邮箱!");
    return false;
}

Answer 1

要实现在输入框 username 输入值时自动隐藏提示框 usernote，你可以使用 jQuery 的 input 事件监听器来实现。每当用户在 username 输入框中输入时，你可以检查输入框的值，如果它不为空，则隐藏提示框 usernote。

以下是实现这一功能的代码示例：

// 当username输入框的值发生变化时
$("#username").on("input", function() {
    // 如果输入框不为空
    if ($(this).val().trim() !== "") {
        // 隐藏提示框
        $("#usernote").hide();
    } else {
        // 如果输入框为空，显示提示框
        $("#usernote").show();
    }
});

这段代码做了以下几件事：

1. 监听 username 输入框的 input 事件。
2. 每当用户输入时，检查输入框的值。
3. 如果值不为空（使用 trim() 去除可能的前后空格），则隐藏 usernote 提示框。
4. 如果输入框为空，则显示 usernote 提示框。

确保这段代码在文档加载完成后执行，通常可以放在 $(document).ready() 函数中：

$(document).ready(function() {
    $("#username").on("input", function() {
        if ($(this).val().trim() !== "") {
            $("#usernote").hide();
        } else {
            $("#usernote").show();
        }
    });
});

这样，每当用户在 username 输入框中输入或删除内容时，usernote 提示框就会根据输入框的内容自动显示或隐藏。