jQuery禁用搜索输入不起作用

Question

I have a search input which does the following. If the search field is empty the button is disabled (this works fine)

Problem is if the form loads with text inside the search filed, I still have to use a space or backspace or type in order to enable the submit button.

I want the submit button to be enabled if there is value in the search Field when the form loads.

Here is a fiddle: http://jsfiddle.net/sz6aLjoz/

Form:

<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

Add a call to trigger .keyup() at the end of your code:

$('#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

This way when the page loads, the event will be triggered as if the user had hit a key, and your code executed.

Answer 2

It's because you started with the button disabled, you can remove the disabled attribute from the button and add this line inside your ready function

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

Fiddle here

Answer 3

If you bind the input via JQuery, it will automatically detect any changes to the value of "#searchInput". Here's the 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);
        }
    });
});

So now, if there the user has autofill on, or has previously search for something then double clicks on the input the selects a value, the code will check the value of "#searchInput" - so; if the users pastes, if there's a keyup event or if the value changes, the code inside of the bind() will be ran.

Here's the JSFiddle