如何使用jquery关注html元素

时间:2022-06-01 18:45:20

how to make focus on the html element using jquery

如何使用jquery关注html元素

6 个解决方案

#1


27  

Pretty easy.

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

#2


1  

$("input").focus();

there you go!

你去吧!

#3


1  

<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

焦点文档模糊文档

#4


1  

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

您可以通过元素类型,其ID或类来关注。例如,创建一个按钮。

> <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.

现在要关注此按钮,您可以按照以下方法操作:1。按钮本身。注意: - 如果有多个按钮,它将聚焦在最后一个按钮上。

$("button").focus();

  1. focus by class name(use '.' before class name)
  2. 按类名重点(在课名前使用'。')

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

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

    通过它的id(在id之前使用'#')

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

  2. even by button followed by its class name

    甚至按钮后跟其类名

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

#5


1  

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.

我希望你在6年前找到了这个问题,但如果你正在使用当前Firefox和Chrome上打开的控制台工具测试焦点功能,它可能会阻止焦点事件正常触发。

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

为了测试它,您可以在启动之前设置TimeTime并关闭它。

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.

无论如何,我不建议将setTimeout用于生产代码,这仅用于“可视化测试目的”,因此您可以在焦点事件触发之前关闭浏览器上的开发工具,并且您可以看到预期结果。

#6


0  

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();
});

#1


27  

Pretty easy.

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

#2


1  

$("input").focus();

there you go!

你去吧!

#3


1  

<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

焦点文档模糊文档

#4


1  

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

您可以通过元素类型,其ID或类来关注。例如,创建一个按钮。

> <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.

现在要关注此按钮,您可以按照以下方法操作:1。按钮本身。注意: - 如果有多个按钮,它将聚焦在最后一个按钮上。

$("button").focus();

  1. focus by class name(use '.' before class name)
  2. 按类名重点(在课名前使用'。')

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

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

    通过它的id(在id之前使用'#')

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

  2. even by button followed by its class name

    甚至按钮后跟其类名

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

#5


1  

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.

我希望你在6年前找到了这个问题,但如果你正在使用当前Firefox和Chrome上打开的控制台工具测试焦点功能,它可能会阻止焦点事件正常触发。

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

为了测试它,您可以在启动之前设置TimeTime并关闭它。

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.

无论如何,我不建议将setTimeout用于生产代码,这仅用于“可视化测试目的”,因此您可以在焦点事件触发之前关闭浏览器上的开发工具,并且您可以看到预期结果。

#6


0  

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();
});