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

Question

我尝试在更改单选按钮后设置输入字段的焦点。更改操作被触发，因为弹出的警报是 showing.But 焦点未设置在输入字段上。我的代码有什么问题？

感谢您的帮助！

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

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

Answer 1

试试下面的代码。将事件从 change 更改为 focus。因为在元素的 change 事件触发后它会获得焦点。所以我猜焦点会变回您单击的元素。

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

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

Answer 2

使用以下。

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

如果任何浏览器不支持，请将超时值从 0 增加到 50 或 100

也不要使用警报。警报会将您从文本框中移开。

Answer 3

这部分必须是异步的

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

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

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

How to focus on input field after change radio?

javascript

focus