Как сохранить фокус в поле ввода после использования мыши, чтобы выбрать значение из выпадающего списка - PullRequest
Новая
       1

Как сохранить фокус в поле ввода после использования мыши, чтобы выбрать значение из выпадающего списка

0 голосов
/ 02 ноября 2018

У меня есть поле ввода, которое опирается на API Google, чтобы предлагать комбинации городов и штатов в зависимости от того, какие типы пользователей. Когда пользователь выбирает предложенную 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()
}

Но это тоже не помогло. Ценю некоторую помощь.

Ответы [ 2 ]

0 голосов
/ 03 ноября 2018

Разберись. Все, что мне нужно было сделать, это добавить следующую строку в конец функции gpSearchCb в файле homeController.js: 

$('#txtCity').focus()

и сохраняет фокус в правильном поле ввода после выбора с помощью мыши.

0 голосов
/ 02 ноября 2018

Я бы предложил вам создать пользовательский 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...