IOS показать клавиатуру на фокус ввода - PullRequest
Новая
       5

IOS показать клавиатуру на фокус ввода

0 голосов
/ 29 января 2019

У меня проблема, которую я не могу исправить.

Клавиатура не отображается на input.focus () на IOS 

 searchMobileToggle.addEventListener('click', function() {
       setTimeout(function(){
          searchField.focus();
       }, 300);
    });

Я искал решение безрезультат, я знаю, что это часто нерешенный вопрос, но я вижу, NIKE (https://m.nike.com/fr/fr_fr/) и FOODSPRING (https://www.foodspring.fr/) делает это на мобильном телефоне.

Так что мне интересно, как они это делают?

Ответы [ 3 ]

0 голосов
/ 01 февраля 2019

Я нашел решение, click() не сработало, но я понял. 

searchMobileToggle.addEventListener('click', function() {
         if(mobileSearchblock.classList.contains('active')) {
            searchField.setAttribute('autofocus', 'autofocus');
            searchField.focus();
        }
        else {
            searchField.removeAttribute('autofocus');
        }
    });

Я работал с vue.js, который удалял атрибут input autofocus, когда компонентбыл загружен.Так что у меня это было по щелчку, но была другая проблема, автофокус работал только один раз, но в сочетании с focus (), теперь он работает постоянно:)

Спасибо за вашу помощь!

0 голосов
/ 30 марта 2019

Ни один из других ответов не работал для меня.В конечном итоге я изучил код Javascript Nike, и это то, что я придумал как функцию многократного использования: 

function focusAndOpenKeyboard(el, timeout) {
  if(!timeout) {
    timeout = 100;
  }
  if(el) {
    // Align temp input element approximately where the input element is
    // so the cursor doesn't jump around
    var __tempEl__ = document.createElement('input');
    __tempEl__.style.position = 'absolute';
    __tempEl__.style.top = (el.offsetTop + 7) + 'px';
    __tempEl__.style.left = el.offsetLeft + 'px';
    __tempEl__.style.height = 0;
    __tempEl__.style.opacity = 0;
    // Put this temp element as a child of the page <body> and focus on it
    document.body.appendChild(__tempEl__);
    __tempEl__.focus();

    // The keyboard is open. Now do a delayed focus on the target element
    setTimeout(function() {
      el.focus();
      el.click();
      // Remove the temp element
      document.body.removeChild(__tempEl__);
    }, timeout);
  }
}

// Usage example
var myElement = document.getElementById('my-element');
var modalFadeInDuration = 300;
focusAndOpenKeyboard(myElement, modalFadeInDuration); // or without the second argument

Обратите внимание, что это определенно хакерское решение, но тот факт, что Apple не исправила этотак долго оправдывает это.

0 голосов
/ 29 января 2019

Не существует законного способа сделать это, так как iOS хочет только открыть клавиатуру при взаимодействии с пользователем, однако вы все равно можете добиться этого, используя prompt() или focus() изв пределах события click() оно и появится.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...