Ionic-framework: Фокус ввода во всплывающем окне

Созданный на 18 мар. 2014  ·  7Комментарии  ·  Источник: ionic-team/ionic-framework

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

Самый полезный комментарий

Мне пришлось добавить эту строку шаблона в мою подсказку, чтобы иметь автофокус.

template: '<input ng-model="data.response" type="text" placeholder="{{ placeHolder }}" autofocus>'

Все 7 Комментарий

Всплывающие окна уже сначала фокусируют свой ввод. Однако в этом есть ошибка. Всплывающее окно всегда фокусируется на ПОСЛЕДНЕМ входном элементе. Он действительно должен сосредоточиться на первом.

Форум: http://forum.ionicframework.com/t/popup-with-multiple-text-input-fields-always-focuses-on-2nd-input/4956/2
Пример: http://codepen.io/calendee/pen/duvsl?editors=101

PR наступает через несколько минут.

Я считаю, что это отлично работает в Интернете, но не на iOS ... код работает, но ввод не фокусируется, и клавиатура не открывается.

@michaelnatkin : в вашем config.xml убедитесь, что у вас есть этот параметр:

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

iOS не позволит полю получить фокус и открыть клавиатуру, если для этого параметра не установлено значение false.

@calendee OMG, спасибо !! Задача решена. Ionic team было бы неплохо добавить это примечание в документ ionicPopup.

@calendee Это работает на iOS, но не работает на устройствах Android. Или я что-то забыл?

@felquis , у меня была такая же проблема. Посмотрев на эту проблему и # 1176, я в конце концов нашел https://github.com/driftyco/ionic/commit/49a295638d6c60b7e17936cfb345665f6b1954d1 , и я смог исправить свое приложение, используя шаблон с автофокусированным вводом:

diff --git a/www/js/app.js b/www/js/app.js
index 8e7afcd..1131dfb 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -57,6 +57,7 @@ angular.module('todo', ['ionic'])
   $scope.newProject = function() {
     $ionicPopup.prompt({
       title: 'Project name',
+      template: '<input autofocus>'
     })
     .then(createProject)
   };

Мне пришлось добавить эту строку шаблона в мою подсказку, чтобы иметь автофокус.

template: '<input ng-model="data.response" type="text" placeholder="{{ placeHolder }}" autofocus>'

Была ли эта страница полезной?
0 / 5 - 0 рейтинги