JQuery 检查页面加载时输入是否为空

Question

嘿，我有一个登录表单，当您单击输入时，标签会向上移动，焦点移出后，它会检查输入中是否有文本，如果标签没有下降，标签是否保持在上方。

我的代码是：

$(function () {
    $('.loginForm .inputGroup input').focusout(function () {
        var text_val = $(this).val();
        if (text_val === "") {
            $(this).removeClass('has-value');
        } else {
            $(this).addClass('has-value');
        }
    });
});

问题是当我点击登录时出现用户名不存在之类的错误我想保留输入中的用户名但是当我这样做时标签停留在输入中文本的顶部。
如果输入有无文本，如何检查加载？

有助于了解情况的图片：

JSFiddle： http://jsfiddle.net/16g7yhLf/

干杯！

Answer 1

您可以在注册事件处理程序后触发 focusout 事件，以便处理程序执行。

$(function () {
    $('.loginForm .inputGroup input').focusout(function () {
        var text_val = $(this).val();
        if (text_val === "") {
            $(this).removeClass('has-value');
        } else {
            $(this).addClass('has-value');
        }
    }).focusout();//trigger the focusout event manually
});

演示：Fiddle

更短的版本可以是

$(function () {
    $('.loginForm .inputGroup input').focusout(function () {
        var text_val = $(this).val();
        $(this).toggleClass('has-value', text_val !== "");
    }).focusout(); //trigger the focusout event manually
});

JQuery 检查页面加载时输入是否为空

JQuery Check if input is empty on page load

html

javascript

css

jquery