home

Jquery focus demo

Jquery focus option is user friendly, when page (it may form) get load directly it will show mouse point in the input type box (by default). And also we can archive this by using css3 option autofocus, but some time if you’re not using form input element, by the time it won’t work, in this case we need to use the jquery to get focus.

Difference between the jquery Focus and Css3 Focus

The main difference is jquery focus will work on any element, like html tags and with php, Salesforce aura component and more.

Jquery focus id based event.

Jquery focus will work with other javascript frame works.

Please have a look into html and jquery focus demo snippet code, coming to the code we have simple basic form, form containing with four inputs with different ids, we are focused on third input(input-3rd). jquery have basic function with form id, based on id it will work(by defaultly it will focus the third input element).

<form method="post" id="form">
    <label>1st input</label>
          <input type="text"  id="input-1st" />
    <label>2nd input</label>
          <input type="text" id="input-2nd"/> 
    <label>3rd input</label>
          <input type="text" id="input-3rd" />    
</form>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>

        //When page loaded automatically 3rd input will auto focus
        $(document).ready(function() {
            
            //set focus to 3rd input field
            $("#form [id='input-3rd']").focus();
        });

    </script>