Question

我想在用户输入时检查输入是否为空

这是我的代码

$('#visitID').on('change', function () {
        if ($('#visitID').val().length == 0) {
            $("#saveandclosebutton").hide();
        } else {
            $("#saveandclosebutton").show();
        }
    });

但即使输入为空，saveandclosebutton也永远不会隐藏。

Answer 1

你也可以包括keyup，例如：

$('#visitID').on('change keyup', function () {
  this.value ? $("#saveandclosebutton").show() : $("#saveandclosebutton").hide();
});

jsFiddle here

当然，您最初需要将按钮设置为display:none，因为<input>最初为空。

#saveandclosebutton {
   display:none;
}

Answer 2

我猜saveandclosebutton的调用方式不同。首先尝试查看主逻辑是否正常工作：

$('#visitID').on('change keyup', function () {
      console.log($('#visitID').val().length);
});

并检查控制台是否有任何输出。您可以像我一样添加keyup，以便在每次按键后完成检查。

Answer 3

将事件处理程序绑定到keyup和change事件，但是您还希望在页面加载时执行事件处理程序：

$('#visitID').on('keyup change', function() {
    $('#saveandclosebutton').toggle($(this).val().length > 0);
}).change();

jsfiddle

Answer 4

尝试将 .is() 与 :empty 选择器一起使用，并使用 keyup 事件当您在输入中输入文本时，会有实时更新：

$('#visitID').on('change keyup', function () {
    if ($(this).is(':empty')) {
        $("#saveandclosebutton").hide();
    } else {
        $("#saveandclosebutton").show();
    }
});

Answer 5

尝试.toggle( showOrHide )

$('#visitID').on('change keyup', function () {
    $("#saveandclosebutton").toggle(this.value.length == 0);
});

Answer 6

尝试密钥。将其更改为：

$('#visitID').keyup(function () {
        var len = $('#visitID').val().length;
        if ( len == 0)
            $("#saveandclosebutton").hide();
        else
            $("#saveandclosebutton").show();
    });

jquery继续检查输入是否为空

6 个答案: