Question

我在引导程序模式中有以下文本字段。

<input id="text_box1" />
<input id="text_box2" />

单击按钮时，我需要聚焦第二个文本框。

我尝试了以下代码，但似乎不起作用

function focusSecondBox() {
   $('#text_box2').focus()
}

关于如何解决此问题的任何想法？

Answer 1

首先获得click事件，然后将焦点放在框上。

它看起来像这样。

$( "#yourButtonId" ).click(function() {
  $( "#text_box2" ).focus();
});

有关更多信息，请查看此链接中的JQUERY文档： Jquery focus documentation

Answer 2

看看下面的工作答案：

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>

  <input id="text_box1" />
  <input id="text_box2" />
  <button id="btn">Focus Input 2</button>

  <script>
    $(function() {
      $("#btn").off("click").on("click", focusSecondBox);
    });

    function focusSecondBox() {
      $('#text_box2').focus()
    }
  </script>

</body>

Answer 3

您需要将click事件绑定到执行该功能的按钮，然后该功能又将重点放在输入上。

function focusFirstBox() {
  $('#text_box1').focus()
}
function focusSecondBox() {
  $('#text_box2').focus()
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text_box1" placeholder="text box 1">
<input type="text" id="text_box2" placeholder="text box 2">
<br />
<button type="button" onclick="focusFirstBox()">focus 1</button>
<button type="button" onclick="focusSecondBox()">focus 2</button>

详细了解jQuery的.click()和.focus()绑定方法。

Answer 4

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#id1").click(function(){
        $("#text2").focus();
    });
});
</script>
<style>
span {
    display: none;
}
</style>
</head>
<body>

<input type="text" id="text1" value="test"/>
<input type="text" id="text2" value="test"/>
<input type="button" value="test" id="id1"/>
</body>
</html>

通过点击按钮以编程方式将焦点移至文本字段

4 个答案: