javascript - 无法将焦点从下拉菜单更改为文本字段

Question

我正在创建一个应用程序，我试图做一些与通常情况下不同的事情。

这个程序将在一个非常受控的环境中运行，并且有特定的目的。对于程序的这一部分，它是一个具有文本输入字段和单个下拉列表的表单。

现在，当在文本输入字段上按“Enter”键时，焦点将切换到下拉列表，用户将在其中使用箭头键选择一个选项，然后再次按“Enter”键，从而提交表单，然后应重新启动表单。

HTML:

<div class="card-body">

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">id</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="id" autofocus>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Problem</label>
        <div class="col-sm-10">
            <select id="problem" class="form-control">
                <option value="none">None</option>
            </select>
        </div>
    </div>

</div>

JavaScript:

$("#id").on('keyup', function (e) {
    if (e.keyCode == 13) {
        $('#problem').focus();
    }
});

$("#problem").on('keydown', function (e) {
    if (e.keyCode == 13) {
        $('#id').val('').focus();
    }
});

问题是，重新聚焦文本输入字段不起作用。看起来好像焦点会切换半秒左右，但随后焦点会返回到下拉框。

如何将焦点切换回文本输入字段并保持在那里，直到再次按下 Enter 键？

--编辑:jsfiddle

Answer 1

因为一旦焦点回到输入上，按键事件就会触发，如果您只使用按键按下，它就会起作用。

这样想

按键输入 > 焦点下拉 > 按键 > 按键输入 > 焦点输入 > 按键 > 焦点下拉

const problem = $("#problem");
const id = $("#id");

const onEnter = (e, fn) => {
  if (e.keyCode == 13) {
    fn();
  }
};

id.on('keydown', e => onEnter(e, () => problem.focus()));

problem.change(e => id.val('').focus());

problem.on('keydown', e => onEnter(e, () => id.val('').focus()));

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-body">
  <div class="form-group row">
    <label class="col-sm-2 col-form-label">id</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="id" autofocus>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label">Problem</label>
    <div class="col-sm-10">
      <select id="problem" class="form-control">
        <option value="none">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </div>
  </div>
</div>