how to make focus on the html element using jquery

how to make foc开发者_如何学编程us on the html element using jquery

Pretty easy.

$('#itemId').focus();

I hope you found the issue 6 years ago, but if you are testing the focus function with the console tool opened on the current Firefox and Chrome, it may prevent the focus event from firing properly.

In order to test it, you can setTimeout and close the developer tool before it fires.

For example:

setTimeout(focusAtMyElement, 3000);

function focusAtMyElement(){
    $('#my-element').focus();
}

By any means I am not recommending setTimeout for production code, this is for "visual testing purposes" only so you can close the dev tool on the browser before the focus event fires and you can see the expected result.

$("input").focus();

there you go!

you can focus either by element type, its id or its class. for example create a button.

> <button id="id" class="class1">

now to make the focus on this button you can follow these methods: 1. by the button itself. note :- in case of multiple button it will focus on the last button.

$("button").focus();

2. focus by class name(use '.' before class name)

$(".class1").focus();

3. by its id(use '#' before id)

   $("#id").focus();

4. even by button followed by its class name

$("button.class1").focus();

<input class="element_class" type="text"/>
<input id="element_id" type="text"/>

<script>
    $('.element_class').focus();
    // the following will obviously blur() the previous
    $('#element_id').focus();
</script>

focus documentation
blur documentation

HTML:

<form>
  <input id="target" type="text" value="Field 1" />
  <input type="text" value="Field 2" />
</form>
<div id="other">
  Trigger the handler
</div>

FOCUS EXAMPLES

$('#target').focus(function() {
  alert('Handler for .focus() called.');
});


$('#other').click(function() {
  $('#target').focus();
});