Question

我有一个搜索输入，它执行以下操作。如果搜索字段为空，则禁用该按钮（这可以正常工作）

问题是如果表单在搜索字段中加载了文本，我仍然必须使用空格或退格键或键入以启用提交按钮。

如果表单加载时搜索字段中有值，我希望启用提交按钮。

表格：

<form>
    <input type="text" name="dosearch" id="searchInput" value="test" class="form-control" placeholder="Search...">
    <button name="submit" class="enableOnInput" id="submitBtn" disabled='disabled' type="submit">Search</button>
</form>

JQuery：

$(function () {
    $('#searchInput').keyup(function () {
        if ($(this).val() == '') { //Check to see if there is any text entered
            //If there is no text within the input ten disable the button
            $('.enableOnInput').prop('disabled', true);
        } else {
            //If there is text in the input, then enable the button
            $('.enableOnInput').prop('disabled', false);
        }
    });
});

Answer 1

在代码末尾添加一个触发.keyup()的电话：

$('#searchInput').keyup(function () {
    if ($(this).val() == '') { //Check to see if there is any text entered
        //If there is no text within the input ten disable the button
        $('.enableOnInput').prop('disabled', true);
    } else {
        //If there is text in the input, then enable the button
        $('.enableOnInput').prop('disabled', false);
    }
}).keyup();

<强> jsFiddle example

这样，当页面加载时，事件将被触发，就好像用户点击了一个键，并且代码已经执行。

Answer 2

这是因为您开始禁用该按钮，您可以从按钮中删除已禁用的属性，并在准备好的功能中添加此行

$('.enableOnInput').prop('disabled', $('#searchInput').val() == '');

小提琴here

Answer 3

如果通过JQuery绑定输入，它将自动检测＆＃34; #searchInput＆＃34;的值的任何更改。这是JavaScript：

$(function () {
    $("#searchInput").bind("change paste keyup", function() {
        if ($(this).val() == '') { //Check to see if there is any text entered
            //If there is no text within the input ten disable the button
            $('.enableOnInput').prop('disabled', true);
        } else {
            //If there is text in the input, then enable the button
            $('.enableOnInput').prop('disabled', false);
        }
    });
});

现在，如果用户已经自动填充，或者之前已经搜索过某些内容，则双击输入选择一个值，代码将检查＆＃34; #searchInput＆＃34;的值。 - 所以;如果用户粘贴，如果有关键字事件或者值发生更改，则bind()内的代码将会运行。

这里是JSFiddle

jQuery禁用搜索输入不起作用

3 个答案: