CODEWITHSUNDEEP
jqueryinputfocus
oceanic815
oceanic815

Reputation: 481

JQuery: Add cursor focus on input field on hover

Right now on hover the menu hides and the search box expands to fill the menu. How can I add focus to the search box and insert the flashing caret on this hover event and remove it on hover exit?

<body>
    <input type="text" value="" id="search" class="noquery" />
</body>

<script>
    $(function(){
        $("#search").hover(function(){
            $("#navi1 ul").hide();
            $("#search").css("width","100%");
            },function(){
            $("#navi1 ul").show();
            $("#search").css("width","96px");
            });
        });
</script>

Upvotes: 0

Views: 3585

Answers (1)

Sergio
Sergio

Reputation: 28837

Try this:

$(function () {
    $("#search").hover(function () {
        $("#navi1 ul").hide();
        $("#search").css("width", "100%");
        $(this).focus(); // to focus
    }, function () {
        $("#navi1 ul").show();
        $("#search").css("width", "96px");
        $(this).blur().val('');  //to remove focus (blur)
    });
});

Demo here

Upvotes: 2

Related Questions