首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法将焦点从下拉列表更改为文本字段

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

Stack Overflow用户
提问于 2018-06-02 02:48:54
回答 1查看 338关注 0票数 0

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

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

现在,当在文本输入字段上按下"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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-02 02:53:31

因为一旦焦点回到输入上,key up事件就会触发,如果您使用just key down,它就会起作用。

这样想吧

keydown enter > focus dropdown > keyup > keydown enter > focus input > keyup > focus dropdown

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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50649446

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档