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

问题是，重新聚焦文本输入字段不起作用。似乎焦点将切换半秒左右，但焦点将返回到下拉框。

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

- 编辑：jsfiddle

Answer 1

因为如果你只使用按键按下它就可以在输入焦点重新启动时启动按键事件。

以这种方式思考

keydown enter＆gt;焦点下拉> keyup＆gt; keydown enter＆gt;焦点输入＆gt; keyup＆gt;焦点下拉

＆＃13;

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

＆＃13;

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

＆＃13;

无法将焦点从下拉列表更改为文本字段

1 个答案: