JQuery doesn't keep an input focused on load

Question

I have an input, that is meant to be focused on when loaded but it does not stay focused. You can see it will focus when loaded but quickly reverts back to its original 'unfocused' state. The JQuery code I am using is :

$(document).ready(function() {
$("#searchinput").addClass("lightIn").val("Enter a car..").focus();
$("#searchinput").on("keyup",function (event) {
    event.preventDefault();
    var qdata=$("#searchinput").val();
    $("#results").load("search.php", {query: qdata}, function(response, status, xhr){
        if (status == "error") {
            alertify.alert("There has been an error, please refresh and try again!");
        }
    });
    return false;
}).on("keydown", function (event) {
    if ($(this).hasClass("lightIn"))
    {
        $(this).removeClass("lightIn").val("");
    }
}).on("blur",function () {
    $("#find").removeClass("select");
    if ($(this).val()=="")
    {
        $(this).addClass("lightIn").val("Enter a car..");
    };
});
$("#searchgo").on("click",function (event) {
    event.preventDefault();
    var qdata=$("#searchinput").val();
    $("#results").load("search.php", {query: qdata}, function(response, status, xhr){
        if (status == "error") {
            alertify.alert("There has been an error, please refresh and try again!");
        }
    });
return false;
});

});

The site - http://joshblease.co.uk/JQuery/find.php

I am using Chrome to test this in so far

stays focused for me. although you may want to make use of `placeholder` and `autofocus` in your HTML, rather than jQuery. — PlantTheIdea, Jun 10 '13 at 20:43
Does some other element on your page have the `autofocus` attribute? — Kevin B, Jun 10 '13 at 20:43
try this: http://stackoverflow.com/questions/2074347/focus-not-working-in-safari-or-chrome — Learner, Jun 10 '13 at 20:44

PlantTheIdea · Answer 1 · 2013-06-10T20:57:46.077

Alright, might as well make an answer.

Your input HTML:

<input id="searchinput" class="transparent" placeholder="Enter a car..." autofocus />

And your new more efficient jQuery:

var $searchinput = $('#searchinput');

function returnResults(qdata,e){
    e.preventDefault();
    $('#results').load('search.php', {query: qdata}, function(response, status, xhr){
        if (status == "error") {
            alertify.alert("There has been an error, please refresh and try again!");
        }
    });
}    

$searchinput.on({
    keyup:function(e) {
        returnResults($(this).val(),e);
    },
    keydown:function() {
        if ($(this).hasClass("lightIn")) {
            $(this).removeClass("lightIn").val("");
        }
    },
    blur:function() {
        $("#find").removeClass("select");
    }
});

$("#searchgo").on("click",function(e) {
    returnResults($searchinput.val(),e);
});

This will work brilliantly for IE9+ and all real browsers. Save the placeholder JS solutions for IE8-.

JQuery doesn't keep an input focused on load

1 Answers1