Потерял фокус ввода текста при появлении клавиатуры - iOS PhoneGap Application

Question

У меня возникла проблема при разработке приложения для мобильных телефонов на iOS 7 с использованием Cordova 2.7 с HTML-ввод текста. когда я выбираю вводимый текст, появляется клавиатура. но ничего не могу напечатать, так как фокус потерян. Я должен выбрать снова, чтобы ввести текст.

может кто-нибудь помочь мне в этом.

Answer 1

Я столкнулся с подобной проблемой, когда клавиатура должна была появиться, но в текстовом поле ничего не было напечатано. Мой был вызван CSS -

* {
  -webkit-user-select: none; /* prevent copy paste */
}

Я исправил проблему, переопределив стиль для текстовых полей -

input[type="text"] {
    -webkit-user-select: text;
}

Answer 2

Внутри приложения Cordova есть файл конфигурации, config.xml, в котором по умолчанию Cordova не позволяет вам контролировать фокус от вызовов JavaScript, это означает, что клавиатура может "исчезнуть"

Изменить это:

<preference name="KeyboardDisplayRequiresUserAction" value="true" />

в

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

а затем просто напишите обработчик события для поля, в котором он устанавливает фокус на себя при нажатии внутри setTimeout. Это сработало очень хорошо для меня в последнее время.

Answer 3

Это известная проблема, которая уже была зарегистрирована с Cordova здесь: https://issues.apache.org/jira/browse/CB-5115. Я также хотел бы обойти это, поскольку это не идеально.

Answer 4

Я столкнулся с этой проблемой и обнаружил, что исправил ее в другом проекте PhoneGap, используя это. Это в основном то же самое, что и ответ @mld, но с использованием html. Использование * не работает для моего приложения на iOS.

html {
  -webkit-user-select: none; /* prevent text selection */
}

input[type="text"] {
    -webkit-user-select: text;
}

Answer 5

У меня была эта проблема в проекте Ionic V1 / Angular 1.5. Это исправление сработало для меня:

window.addEventListener('native.keyboardshow', function () {
  if ( document.activeElement != document.getElementById('my-input') && document.activeElement.nodeName != 'INPUT' ){
    document.getElementById('my-input').focus()
  }
});

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

Я вызвал это внутри функции $ onInit моего компонента - обязательно удалите прослушиватель событий, когда ваш компонент уничтожается с помощью $ onDestroy. Это также предполагает, что вы используете ionic-plugin-keyboard плагин.

Это хорошо работает с одним входом, но если у вас есть несколько входов на одной странице, вам, вероятно, понадобится дополнительная логика, чтобы приложение не фокусировалось на неправильном вводе при открытии клавиатуры.