Question

我有一个输入框，它依赖于Google API来根据用户类型建议城市/州的组合。当用户使用鼠标从可能选项的下拉列表中选择Google建议的城市/州组合（如果用户使用向上/向下箭头键进行选择，则不会出现此问题），输入框由于某种原因会失去焦点。在用户使用鼠标从Google下拉菜单中选择正确的值后，如何确保输入框保持焦点？这是我的html代码：

                      <div class="col-md-4 col-sm-12 col-xs-12">
                    <div class="form-group">
                      <input gp-gac="{ types: ['(cities)'],  componentRestrictions: { country: 'US' }}" class="form-control"
                        ng-model="home_ctrl.location"
                        gp-components="{ locality: 'long_name', administrative_area_level_1: 'short_name' }"
                        gp-callback="home_ctrl.gpSearchCb(result, place)"
                        vs-city="home_ctrl.city"
                        vs-state="home_ctrl.state"
                        placeholder="City, State"
                        id="txtCity">
                    </div>
                  </div>

我试图在输入代码中加入onclick事件

onclick = "putFocus()"

在我的javascript代码中引用了以下功能：

function putFocus(){
  document.getElementByd("txtCity").focus()
}

但是，这似乎也没有达到目的。感谢一些帮助。

Answer 1

我建议您创建一个自定义的 CSS类，其中包含您希望“聚焦”时将输入显示给用户的方式，并在用户单击时将其添加到您的输入中。 .focus不会解决问题，因为当输入处于焦点状态时，它被“选中”，这意味着光标位于输入元素内。

尝试这样的事情：

<!DOCTYPE html>
<html>

<style>

  .focused{
    border-style: solid, 10px;
    border-color: blue;
  }

</style>


<body>

<input type="text" id="myInput" onClick="myFunction()">

<script>

  function myFunction() {
      myInput = document.getElementById("myInput");
      myInput.classList.add("focused");
  }

</script>

</body>
</html>

Answer 2

弄清楚。我要做的就是将以下行添加到homeController.js文件中gpSearchCb函数的末尾：

$('#txtCity').focus()

，并在使用鼠标进行选择后将焦点保持在正确的输入字段中。

使用鼠标从下拉列表中选择值后如何在输入框中保持焦点

2 个答案: