Question

在我更改单选按钮后，我尝试设置输入字段的焦点。触发更改操作，因为弹出的警告正在显示。但是未在输入字段上设置焦点。我的代码出了什么问题？

感谢您的帮助！

＆＃13;

$("input[name=options]").change(function () {
  alert(this.value);
  document.getElementById("input1").focus();
});

＆＃13;

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
      <div class="row justify-content-center">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary active">
            <input type="radio" name="options" value="x1" id="option1" autocomplete="off" checked> Radio 1
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" value="x2" id="option2" autocomplete="off"> Radio 2
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" value="x3" id="option3" autocomplete="off"> Radio 3
          </label>
        </div>
      </div>
      <br>
      <div class="row justify-content-center">
        <form>
          <div class="input-group input-group-lg">
            <input type="number" class="form-control" id="input1" autocomplete="off">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-primary btn-custom">
                Go!
              </button>
            </span>
          </div>	
        </form>
      </div> <!-- row -->
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

  </body>
</html>

＆＃13;

Answer 1

这部分必须是异步的

$("input[name=options]").change(function () {
    setTimeout(function() { document.getElementById("input1").focus(); }, 0)
});

http://jsbin.com/tizexolemi/edit?html,js,output

Answer 2

尝试以下代码。已将事件从change更改为focus。因为在元素的更改事件触发后，它将得到集中。所以我猜焦点会改回你点击的元素。

＆＃13;

$("input[name=options]").focus(function () {
  alert(this.value);
  document.getElementById("input1").focus();
});
document.getElementById("input1").focus();

＆＃13;

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
      <div class="row justify-content-center">
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary active">
            <input type="radio" name="options" value="x1" id="option1" autocomplete="off" checked> Radio 1
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" value="x2" id="option2" autocomplete="off"> Radio 2
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" value="x3" id="option3" autocomplete="off"> Radio 3
          </label>
        </div>
      </div>
      <br>
      <div class="row justify-content-center">
        <form>
          <div class="input-group input-group-lg">
            <input type="number" class="form-control" id="input1" autocomplete="off">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-primary btn-custom">
                Go!
              </button>
            </span>
          </div>	
        </form>
      </div> <!-- row -->
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

  </body>
</html>

＆＃13;

Answer 3

使用以下内容。

$("input[name=options]").change(function () {
    window.setTimeout(function () {
        document.getElementById("input1").focus();
    }, 0);
});

如果任何浏览器不支持

，则将超时值从0增加到50或100

也不要使用警报。警报将从文本框中聚焦您。

更改收音机后如何关注输入字段？

3 个答案: