Ionic-framework: проблема (формы): ввод, прокрутка, проблемы с клавиатурой для форм

Созданный на 19 апр. 2016  ·  109Комментарии  ·  Источник: ionic-team/ionic-framework

Прямо сейчас способ обработки ввода формы в Ionic может быть лучше. У Ionic 1 были отличные настройки по умолчанию для ввода формы в отношении обработки клавиатуры, прокрутки контента и т. Д. Ionic 2 необходимо сделать согласованным и, что более важно, правильно работать для ввода формы на всех платформах (iOS, Android, Windows).

См. Это репо для примера кода, который должен запускаться на устройствах: https://github.com/dylanvdmerwe/ionic2-formtest

Android:

  • [x] 1. При выборе ввода необходимо прокрутить все содержимое формы, чтобы выбранный элемент был виден после отображения клавиатуры.
  • [x] 2. Когда клавиатура скрыта, верните прокрутку в исходное положение и удалите добавленные отступы.
  • [x] 3. Прикосновение к области, которая не является входом, закрывает клавиатуру.
  • [] 4. Если пользователь выбирает второй ввод после заполнения первого, экран следует прокрутить, чтобы сфокусироваться на новом выбранном поле ввода.
  • [x] 5. На некоторых клавиатурах есть кнопки «Далее», «Назад» и «Готово».
  • [x] 6. Поддержка автокоррекции, автозаполнения и автокапитализации, а также их комбинаций.

    iOS:

  • [x] 1. При выборе ввода необходимо прокрутить все содержимое формы, чтобы выбранный элемент был виден после отображения клавиатуры.

  • [x] 2. Когда клавиатура скрыта, верните прокрутку в исходное положение и удалите добавленные отступы.
  • [x] 3. Прикосновение к области, которая не является входом, закрывает клавиатуру.
  • [x] 4. Если пользователь выбирает второй ввод после заполнения первого, экран следует прокрутить, чтобы сфокусироваться на новом выбранном поле ввода.
  • [] 5. На некоторых клавиатурах есть кнопки «Далее», «Назад» и «Готово». Они должны быть подключены к входам формы на странице, чтобы пользователь мог циклически перебирать параметры ввода.
  • [x] 6. Поддержка автокоррекции, автозаполнения и автокапитализации, а также их комбинаций.

_Обратите внимание, что эта проблема не имеет ничего общего с формами или входными данными в компоненте слайдов . Это будет отдельная проверка согласованности.

Какая ионная версия? 2.x

Запустите ionic info из приглашения терминала / cmd: (вставьте вывод ниже)
Кордова CLI: 6.1.1
Версия Ionic Framework: 2.0.0-beta.4-201604170622
Версия Ionic CLI: 2.0.0-beta.24
Версия Ionic App Lib: 2.0.0-beta.14
ОПЕРАЦИОННЫЕ СИСТЕМЫ:
Версия узла: v5.7.0

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

Уважаемая команда ionic ( @manucorporat , @brandyscarney , @adamdbradley )
Я знаю, что вы много работаете над следующей версией, но эти проблемы с клавиатурой очень важны для работы с приложением. Пожалуйста, подумайте о том, чтобы дать им высокий приоритет вместе с другими давними проблемами, такими как виртуальная прокрутка.
Огромный размер приложения и медленный запуск - отстой, хорошо, но когда приложение установлено и запущено, оно должно дать должный опыт работы с основными вещами, такими как работа с клавиатурой.

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

@dylanvdmerwe Это здорово, спасибо, что

Также используется автозаполнение и автокоррекция, по умолчанию они отключены, если они специально не добавлены в элемент: https://github.com/driftyco/ionic/blob/2.0/ionic/components/input/input-base.ts # L217

Как вы думаете, автоматическое использование заглавных букв должно быть отключено по умолчанию?

@adamdbradley

  • Я не могу заставить кнопки клавиатуры на iOS переключаться между различными входами. Они «путаются», и клавиатура в итоге просто закрывается. По-прежнему нужно тестировать на Android, когда я тестирую с другими клавиатурами, на которых есть эти кнопки.
  • Не уверен, что лучше для значений по умолчанию для автозаполнения и автокоррекции. В iOS для определенных типов клавиатуры они включены по умолчанию - но я думаю, что лучше всего следовать стандартным правилам <input> ?
  • Я протестирую несколько перестановок для автозаполнения и автоматического ввода заглавных букв чуть позже. Обратите внимание, что я записал это отдельно здесь, когда плагин клавиатуры изменился.

Обратите внимание, что я тестирую их на реальных устройствах.

@adamdbradley Я обновил указанные выше элементы. Выдающиеся вещи - это определенно воспроизводимые проблемы.

Где мы находимся в вопросе №1 для Android? Без него мое приложение портится.

+1 по проблеме Android №1 :)

Есть ли какие-либо подвижки по предметам, перечисленным в этом выпуске?

@dylanvdmerwe, когда

+1 по проблеме Android №1 :)

+1 по проблеме с Android:

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

Это мешает мне полностью перейти с ionic1 на ionic 2.
Всего наилучшего!

Это мешает мне полностью перейти с ionic1 на ionic 2.

То же самое.

+1 к проблеме Android №1
Пожалуйста, исправьте это как можно раньше! Мы запустили новое приложение по этому поводу, но не хотим, чтобы эта ошибка помешала нам вернуться к Ionic 1!

@adamdbradley , @ jgw96 Есть ли на данный момент обходной путь?

Подскажите пожалуйста обнову? Трудно продемонстрировать, что эта основная функция не работает ...
Спасибо!

Я также был бы признателен за обновленную информацию по этому поводу. Наши элементы ion-input не прокручиваются в поле зрения при наведении на них фокусировки. Мы пытались переключиться на обычные элементы input но это вызывает множество других проблем. Спасибо!

Всем здравствуйте! Могу заверить вас, что мы много работаем над такими проблемами. Вы все в основном сталкиваетесь с этой проблемой на iOS или Android? Или на обоих бывает?

Бывает на андроиде, насчет ios не уверен. Прямо сейчас, только когда я начинаю печатать, пользовательский интерфейс прокручивается вверх, чтобы показать ввод. В идеале это должно произойти, как только появится фокус и всплывет клавиатура.

Привет,

Я вижу еще несколько проблем с iOS на устройстве (не проверял на Android):

  • При использовании плавающих меток при щелчке по входу часто перед значением временно отображается пустая строка, в результате чего значение прыгает вниз, а вход расширяется по вертикали. При использовании обычных меток значение иногда временно смещается по горизонтали.
  • С плавающими метками курсор выскакивает за пределы ввода при прокрутке.
  • При использовании плагина клавиатуры cordova и использовании вспомогательной панели для навигации между полями весь вид иногда перескакивает. После установки disableScroll (true) следующая кнопка работает нормально, но кнопка «Назад» по-прежнему заставляет экран прыгать. Не уверены, следует ли сообщать об этом там?

Спасибо за хорошую работу над Ionic, с нетерпением жду устранения всех недостатков!

Та же проблема с клавиатурой и ионным вводом в Android. Очень важная проблема для всех приложений с формами!

Нет обновлений по этой критической проблеме?

есть новости по этой проблеме?

Хотелось бы, чтобы это было рассмотрено в следующем RC.

Обновите это. # 5 для iOS я не могу воспроизвести. У меня это нормально работает в мастере, может кто-нибудь подтвердить?

Сейчас смотрю на №1.

У меня такая же проблема. Есть какие-нибудь обновления? .

На iOS №1 не очень хорошо работает на больших экранах (iPad). Ввод прокручивается до самого верха, при этом было бы неплохо, если бы он был ближе к клавиатуре.

Привет,

Потребовалось время, чтобы изучить проблему, поскольку она возникла на нескольких устройствах с нашей стороны.

Android:

  • Хорошо смотрится при включении scrollAssist
  • Тем не менее, некоторая ошибка при переключении с одного ионного входа на другой, когда клавиатура уже открыта (страница прокручивается очень сильно).

iOS:

  • В первый раз страница не прокручивается
  • Второй раз, при любом входе на страницу, страница точно прокручивается вверх
  • Как и в Android, при переключении между полями страница слишком сильно прокручивается.

После некоторого поиска мы обнаружили, что scroolView.scrollTo использует свойство scrollTop HTML.
Это свойство ограничено теоретическим значением: scrollHeight - clientHeight.

Мы просто добавили следующие строки в scroll-view.js (node_modules / ionic-angular / util /):
console.log (fromY + '=>' + y);
console.log ('максимальное теоретическое значение:' + (this._el.scrollHeight - this._el.clientHeight));
И проблема кажется очевидной.

По некоторым причинам, когда вы фокусируете поле на Android, клавиатура генерируется перед прокруткой вверх, поэтому максимальное теоретическое значение превосходит значение, которое мы хотим прокрутить вверх. На iOS в первый раз это не так. Таким образом, максимальное значение прокрутки вверх равно единице.

Твоя очередь ;)

@EDumdum Как воспроизвести эту проблему? Когда у меня есть фокус на вводе, а клавиатура уже поднята и переключаюсь на следующий ввод, следующий ввод прокручивается под заголовком. Разве это не для вас?

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

Привет @adamdbradley

Шаг для создания примера ниже. Снимок экрана сделан в эмуляторе, но мы воспроизводим то же поведение на устройствах. Форма предназначена для добавления цвета (синий = сфокусированное поле, красный = другое поле).

Шаг для воспроизведения

Шаг для создания примера

  • Создал новый проект (ionic start -v2 myApp) => RC2
  • Добавлен scrollAssist в конструктор моего приложения
    constructor(config: Config, platform: Platform) { config.set('scrollAssist', true); ... }
  • Изменил мои home.html и home.ts и немного добавил в .scss

<ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div class='takePlace'>Bla bla</div> <form novalidate [formGroup]="form"> <ion-item> <ion-input type="tel" pattern="[0-9]{3}" formControlName="dummyField"></ion-input> </ion-item> <ion-item> <ion-input formControlName="dummyField2"></ion-input> </ion-item> </form> </ion-content>

import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public form: FormGroup; constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({ dummyField: ['', [Validators.required, Validators.pattern('[0-9]{3}')]], dummyField2: ['', [Validators.required, Validators.pattern('[0-9]{3}')]] }); } ngOnInit() { } }

.takePlace { height: 300px; border: 1px solid red; }

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

@kodeine
image

Большое спасибо за отзыв! Я буду использовать все эти заметки для различных сценариев тестирования. Я постараюсь поскорее выпустить вечерний выход, чтобы все могли его опробовать, спасибо!

@adamdbradley
другой сценарий, я был на странице, где у меня был ввод и клавиатура была открыта, я нажал кнопку «Назад» и заметил, что вкладки также были поверх клавиатуры. так что, возможно, нам нужно оставить вкладки за клавиатурой.

Лучше работает ночью!

Однако я обнаружил ошибку, вызванную недавними изменениями. Если вход A имеет фокус, и вы нажимаете на вход B, клавиатура скрывается, и ни один из входов не будет иметь фокуса.

Кроме того, при фокусировке ввода он «прыгает» в позицию, вместо анимации плавной прокрутки, как, например, когда вы фокусируете ввод в Safari, это предназначено?

РЕДАКТИРОВАТЬ: это использует WKWebView. Не тестировал UIWebView.

Мне действительно интересно узнать, будет ли поддержка кнопки «далее» для входов.
Для пользователя (android, не уверен для ios) довольно сложно не нажимать кнопку отправки / ОК, думая, что он перейдет к следующему вводу, а не завершит действие формы.

@biesbjerg Не могли бы вы подробнее описать, как воссоздать эти проблемы? Когда вы говорите, что он прыгает на место, заголовок прокручивается? Какой тип ввода? Вход находится вверху приложения или внизу? Можете ли вы предоставить видео о проблеме? Спасибо

@adamdbradley это видео показывает «переход в позицию вместо плавной прокрутки», а также показывает ошибку, которую я заметил: если вы сфокусировались на вводе и нажали аппаратную кнопку назад, он не прокручивает контент назад.
редактировать: изменен размер гифки.

ezgif com-cb02e8c895

@adamdbradley Это проблема с фокусом ввода, когда клавиатура исчезает, а не фокусируется на нажатом вводе.

focus-keyboard

И это на Android, где в фокусе моя форма делает внезапный скачок, и первый сфокусированный ввод не виден на экране:

keyboard-jump

Привет @biesbjerg ! Совсем недавно мы выпустили еще один вечерний выпуск, который включал еще несколько исправлений для прокрутки ввода, не могли бы вы попробовать? Спасибо!

@ jgw96 Привет! Я тестировал 2.0.0-rc.3-201611302233, и ничего не изменилось, поэтому записи в формате gif по-прежнему являются действительными проблемами.

Спасибо за тестирование @biesbjerg ! Не могли бы вы опубликовать репо или создать plunkr, который я могу использовать для воспроизведения этой проблемы?

@ jgw96 Вот и все! https://github.com/biesbjerg/6228-ionic-keyboard-issues

Шаги:

  1. git clone https://github.com/biesbjerg/6228-ionic-keyboard-issues.git
  2. cd 6228-ionic-keyboard-issues
  3. npm install
  4. mkdir www (необходимо из-за ошибки cordova / ionic, когда www должен существовать, иначе установка плагина завершится ошибкой)
  5. ionic state reset
  6. Запускать на устройствах

Проблема, показанная в видео для iOS, связана с UIWebView, а также с WKWebView.

Проблема с Android как-то связана с тем, что мой контент вертикально центрирован с помощью flexbox, но он должен вести себя нормально даже в этом случае.

Привет @biesbjerg ! Спасибо за репо. Сегодня со скроллингом происходит еще несколько изменений, которые могут решить эту проблему. Я обновлю этот пост своими выводами после тестирования.

Привет @ jgw96! Прохладный! :-)

Touching an area that is not an input dismisses the keyboard.

Я вижу, что рядом с этой частью (ну и другими частями) стоит галочка; Значит ли это, что это будет в следующем выпуске? Это было бы здорово для приложений чата, у которых есть кнопка «Отправить» в <ion-footer> над клавиатурой! Тогда клавиатура не всегда закрывалась после нажатия кнопки «Отправить».

Всем привет. У меня тоже такая же проблема. И я кое-что наблюдаю.
Когда входы не выбраны, у нас есть этот случай.

1jpg

Но когда мы его выбираем, у нас есть этот

2

В результате я сделал этот плохой шаг с! Important

3

И это работает для меня как временное решение.

Итак ... все становится действительно запутанным, когда у вас есть что-то, что использует position: relative.

В этом примере логотип - это элемент с относительным положением, и если вы нажмете на первый ввод, он будет таким:
outro

Но нажатие на второй вход также подталкивает логотип:
photo569187513406696003

@ jgw96 есть новости об этой проблеме и о RC.4?

Я тоже очень надеюсь получить новости по этому поводу, мой клиент оказывает сильное давление 🙉

Хорошая новость заключается в том, что в последних ночных изданиях входные данные работают намного лучше. Я думаю, что многие люди, в том числе и я сам, как первоначальный регистратор этой проблемы, будут довольны исправлениями.

@yannbf , честно говоря, Ionic 2 все еще является предварительным выпуском программного обеспечения.

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

В любом случае, как можно протестировать мое текущее приложение с помощью этой ночной игры?

@yannbf npm install ionic-angular<strong i="6">@nightly</strong> --save
и не забудьте обновить свой package.json до angular 2.2.1

Намного лучше работает с ночным режимом! Спасибо ребята

Всем здравствуйте! Спасибо за использование Ionic! @biesbjerg и @yannbf , не могли бы вы обновиться до rc4 и протестировать, пожалуйста? В этом выпуске есть множество исправлений прокрутки ввода, которые, надеюсь, исправят ваши проблемы. Спасибо!

@ jgw96 Да, уже делал. Это намного лучше! С нетерпением жду финального релиза 😄

@ jgw96 После обновления все стало лучше, но элементы с position:absolute или position:fixed по-прежнему затронуты. Мне удалось обойти эту страницу с логотипом, который я отправил ранее (с другим подходом, удалив абсолютное положение), но, как и на следующей странице, у меня должны быть «условия соглашения» внизу страницы, я все еще сталкиваюсь с проблемой :

selection_002

Вот код:

<div class="agreement-text">
    <p>paragraph's content..</p>
</div>

И CSS:

.agreement-text {
    position: fixed;
    padding: 10px;
    margin-top: 40px;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    a {
      color: rgb(250, 231, 124);
    }
}

В моем случае после обновления до RC5 проблема с прыгающим вводом на Android осталась. Я только что начал новый проект с пустым шаблоном и скопировал компонент ion-input из документации в ion-content, как показано ниже.

jumping input

Как видите, прыгает каждый компонент, кроме первого.
Для записи это результат выполнения команды ionic info .

Кордова CLI: 6.4.0
Версия Ionic Framework: 2.0.0-rc.5
Версия Ionic CLI: 2.2.1
Версия Ionic App Lib: 2.2.0
Версия Ionic App Scripts: 1.0.0
Версия ios-deploy: не установлена
версия для ios-sim: не установлена
ОС: Windows 10
Версия узла: v6.9.2
Версия Xcode: не установлена

@ almr193 такое поведение выглядит правильным. Экран прокручивается по мере того, как клавиатура будет видна на мобильных устройствах. Прокрутка гарантирует, что выделенный ввод всегда виден и не перекрывается экранной клавиатурой.

@dylanvdmerwe Спасибо за быстрый ответ, сценарий, который я представил, выглядит правильным, и я понимаю, что экран прокручивается, когда клавиатура отображается на экране. Однако у меня есть еще один странный сценарий с ion-input внутри ion-list с включенным изменением порядка элементов. Ввод выходит за рамки, и пользователь не видит, что он пишет.

jumping

@ almr193 да, к сожалению, это нерешенный вопрос.
См. Пункты 1) и 4) Android исходного сообщения выше.

+1 Пока не решено. Никакие методы с клавиатуры в ionic-native, похоже, не помогают на Android

У меня проблема с использованием слайдов + входов. Он показывает очень странное поведение, так как не выполняет прокрутку.

ezgif com-resize

+1

Кордова CLI: 6.4.0
Версия Ionic Framework: 2.0.0
Версия Ionic CLI: 2.1.18
Версия Ionic App Lib: 2.1.9
Версия Ionic App Scripts: 1.0.0
Версия ios-deploy: не установлена
версия ios-sim: 5.0.13
ОС: macOS Sierra
Версия узла: v6.9.4
Версия Xcode: Xcode 8.2.1 Версия сборки 8C1002

+1

Это все еще проблема с последними и лучшими кордовыми и ионными средствами.

Есть ли решение или обходной путь?

- Обновлено -

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

-

Your system information:

Cordova CLI: 6.5.0 
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v6.1.0
Xcode version: Xcode 8.2.1 Build version 8C1002

Начальный экран

image1

Экран после выбора элемента ввода домена

image2

Уважаемая команда ionic ( @manucorporat , @brandyscarney , @adamdbradley )
Я знаю, что вы много работаете над следующей версией, но эти проблемы с клавиатурой очень важны для работы с приложением. Пожалуйста, подумайте о том, чтобы дать им высокий приоритет вместе с другими давними проблемами, такими как виртуальная прокрутка.
Огромный размер приложения и медленный запуск - отстой, хорошо, но когда приложение установлено и запущено, оно должно дать должный опыт работы с основными вещами, такими как работа с клавиатурой.

Придется вмешаться ,

  • # 9633
  • # 9518
  • # 9514
  • # 8607

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

Проблема в том, что действительно нет смысла добавлять новые функции, если основные из них все еще не работают каким-то очевидным образом. Возможно, более важно правильно понять фундаментальные вещи, прежде чем добавлять в структуру.

Люблю всю тяжелую работу, но приоритеты здесь кажутся неправильными.

Ребята, лучший способ расставить приоритеты и исправить это - предоставить _ воспроизводимый код_, который команда Ionic может протестировать и найти проблемы. Снимки экрана и гифки эпичны, но код, который они могут использовать, чтобы увидеть ваши проблемы, лучше всего. # 2центы

Обратите внимание, что с формами и входными данными не используйте display: absolute для позиционирования объектов.

У меня тоже есть эти проблемы. Это нетривиальная проблема. Как это было проблемой в течение года, и, казалось бы, без решения?

У меня проблема, когда поле ввода сфокусировано, экран поднимается и опускается каждый раз, когда я нажимаю на поле. Может кто-то помочь мне, пожалуйста?
teste

Версия Ionic Framework: 2.3.0
Версия Ionic CLI: 2.2.2
Версия Ionic App Lib: 2.2.1
Версия Ionic App Scripts: 1.1.4
Версия ios-deploy: 1.9.1
версия ios-sim: 5.0.4
ОС: macOS Sierra
Версия узла: v7.2.0
Версия Xcode: Xcode 8.2.1 Версия сборки 8C1002

@pedrodurek, было бы здорово, если бы вы предоставили плункер, чтобы ребята из ionic могли воспроизводить.

Я нашел временное решение проблемы с прыгающим текстом. Это НЕ исправление, а, по сути, взлом, пока не будет реализовано лучшее исправление.

Во-первых, убедитесь, что у вас есть следующие наборы:

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

Затем в app.module.ts найдите следующее:

IonicModule.forRoot(YourApp)

и сделайте так:

IonicModule.forRoot(YourApp, {
      scrollAssist: false,
      autoFocusAssist: false
    }),

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

@ Tyler-Darby Спасибо, что поделились своим решением, это не лучшее решение, но разумное, и оно сработало для меня.

У меня была эта проблема, и это сводило меня с ума, но я наконец понял, что это было вызвано применением transform: translate3d(0,0,0) к элементам для принудительного аппаратного ускорения. Оказывается, при открытии клавиатуры фокус ввода прерывается.

Я уверен, что это не проблема всех, но, надеюсь, кому-то это поможет.

У меня несколько платформ, и я исправлял это ..

Я вставляю app.component.ts:

constructor(
                ...
                public config: Config,
        ) {
                // all platforms
        this.config.set( 'scrollPadding', false )
        this.config.set( 'scrollAssist', false )
        this.config.set( 'autoFocusAssist', false )
        // android
        this.config.set( 'android', 'scrollAssist', true )
        this.config.set( 'android', 'autoFocusAssist', 'delay' )
               ...

Может кому будет полезно.
Спасибо, ребята за подсказки;)

Посмотрите видео:
https://www.dropbox.com/s/6p49z0chle9g1b9/git-ios-input.mov?dl=0

Информация об окружающей среде:
глобальные пакеты:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.3.0

локальные пакеты:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.3.0

Система:

Node       : v7.10.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 
ios-deploy : 1.9.0 
ios-sim    : 5.0.8

Я использовал <input/> как <ion-input></ion-input>
Попробуй с этим.

Привет @maulikakapure!

Я запускаю свое первое ионное приложение для своей компании, и у меня также есть проблема с прокруткой / фокусировкой на клавиатуре. Очевидно, вы нашли решение, которое показали в своем видео. Не могли бы вы предоставить исходный код? Я еще не нашел подходящей комбинации обходных путей, параметров конфигурации и тегов html для использования.

Спасибо

@ Tyler-Darby Эй, Тайлер, где мне поместить следующий код?

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

Привет @cwiejack

Посмотрите простую демонстрацию здесь: https://www.dropbox.com/s/1o9hrnjgt7u3bpy/BasicDemo.zip?dl=0

Спасибо.

Чтобы исправить проблемы с ключевыми словами по умолчанию в Ionic, просто вставьте следующее в импортированные файлы app.module.ts:

    IonicModule.forRoot(MyApp, {
      scrollAssist: false,
      autoFocusAssist: false
    })

Это сразу решит проблемы с клавиатурой.

@aplimovil, это решило проблему в моем приложении для Android! Ура тебе, добрый человек!

Какой смысл иметь scrollAssist & autoFocusAssist если установка их на true делает приложения непригодными для использования?

Есть ли случаи, когда их включение дало бы какие-то преимущества?

Исправление аплимовила, похоже, устранило все мои проблемы!

Так что да, мне было бы интересно, почему вы когда-либо устанавливали для любого из них значение true.

@JefferE Это потому, что функции scrollAssist и autoFocusAssist Ionic не работают в iOS (в Android они почти работают нормально, хотя улучшения остаются практически незамеченными, по крайней мере, для меня) и, похоже, не все отчеты о проблемах здесь достаточно, поэтому они исправляют это в грядущем выпуске. Надеюсь, когда-нибудь они заметят эту ветку и навсегда исправят эти функции на iOS или выборочно отключат их по умолчанию на данный момент в iOS.

когда ion-textarea в сетке, keyboard.disablescroll (false) не работает? как решить проблему

Это сработало для меня

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false

    }),

Ионная информация:

CLI Packages:

@ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.1 
    ios-sim           : 5.0.8 
    Node              : v6.11.3
    npm               : 3.10.10 
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b 

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

важный момент, который я обнаружил, заключается в том, что при использовании плагинов (например, @ ionic-native / keyboard)
и делать что-то с вашим интерфейсом в тот момент, когда на клавиатуре отображается this.keyboard.onKeyboardShow().subscribe(()=>{ this.someFlag=true}) и использовать флаг в интерфейсе, чтобы что-то изменить. он не изменится , вам нужно будет самостоятельно запустить обнаружение углового изменения, импортировав ChangeDetectorRef и используя его функцию detectChanges() в subscribe .

Я создал этот gitrepo, чтобы продемонстрировать этот случай. Не стесняйтесь смотреть. Это было для меня откровением, поскольку я не осознавал, что есть случаи, когда вы subscribe(()=>{}) что-то делаете, вносите изменения, но в интерфейсе не отображается.

сегодня поумнел немного :)

И последнее: желаю всем хороших выходных!

Меня сбивает с толку то, что этой проблеме более полутора лет, и никаких действий не было предпринято. Это полностью разрушает поток моего приложения. Из-за этого он выглядит глючным и некачественным, и мы вынуждены прибегать к взлому, чтобы все было близко к красивому. @mhartington , здесь что-то происходит внутри?

У меня был телефонный разговор с @matthewkremer из Ionic в качестве продолжения использования PRO-версии ionic сейчас, и я сказал, что это серьезная проблема. Он сказал, что понял и постарается сделать это более приоритетным.

Мне то же. Это совсем не красиво ..

Привет всем, это становится для нас главным приоритетом, см. Твит @adamdbradley сегодня утром: https://twitter.com/adamdbradley/status/916295747968040960

Ожидайте обновлений в ближайшие дни / недели

Звучит хорошо, я надеюсь, что мы скоро вернем жизнь, не применяя ненужных хаков.

Для тех, кто уже использует WK, я готовлю новый плагин клавиатуры: cordova-plugin-ionic-wkkeyboard :

  1. Сначала удалите ionic-plugin-keyboard
cordova plugin rm ionic-keyboard-plugin --save
  1. Установите новый плагин:
cordova plugin add cordova-plugin-ionic-wkkeyboard --save

cc @hitendramalviya @ ionut-movila @mmolhoek @ Тайлер-Дарби @yingbaby @maulikakapure @aplimovil

Есть странная проблема с этой новой wkkeyboard и отключением / включением ion-textarea с помощью FormGroups и FormControls. После повторного включения полной формы ion-textarea остается отключенным. Этого не происходит при использовании «старой» клавиатуры.

Сегодня вечером создам выпуск :).

// Редактировать:
Наверное, проблема в другом. Такое же поведение в браузере.
https://github.com/ionic-team/ionic/issues/13170

Что мне следует искать, если клавиатура просто не вызывает изменение размера, не говоря уже о прокрутке для ввода?

Похоже, проблема с прокруткой уже решена, но я все еще испытываю проблемы на ios, когда, когда ввод находится в середине экрана, ввод не прокручивается, когда клавиатура поднята. Это проблема как при касании ввода, так и при использовании клавиш навигации на клавиатуре. Я что-то упускаю? Я попробовал несколько решений, представленных здесь, но, похоже, они не работают. (для дополнительной информации я использую Ionic в браузере, а не как собственное приложение)

вау 2018 и ничего.

они дали мне это решение, но оно не совсем идеальное

.scroll-content {
padding-bottom: 0! важно;
}

Привет, ребята, я случайно обнаружил, что сборка по умолчанию имеет _cordova-plugin-ionic-keyboard_. И когда я заменил его на _ionic-plugin-keyboard_, ошибки ввода исчезли.

Итак, мое решение:
Кордова плагин RM ionic-клавиатура
Плагин ionic cordova добавить клавиатуру ionic-plugin
npm install --save @ ionic-native / keyboard

+1

Vendettall, я пробовал это, но это не сработало!

У вас есть эта досадная ошибка с панелью заголовков?

В чт, 29 марта 2018 г., в 23:31, Эммануэль Фаш [email protected]
написал:

Vendettall, я пробовал это, но это не сработало!

-
Вы получили это, потому что прокомментировали.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/ionic-team/ionic/issues/6228#issuecomment-377362762 ,
или отключить поток
https://github.com/notifications/unsubscribe-auth/AYPMdggjRqZBZ0wghtxFjVbPLViBkR8hks5tjUSQgaJpZM4IKhUp
.

Если проблема не исчезла, попробуйте новый плагин для ионной клавиатуры.

ionic cordova plugin rm  ionic-keyboard-plugin
ionic cordova plugin add cordova-plugin-ionic-keyboard

Затем установите

<preference name="KeyboardResizeMode" value="ionic" />

В config.xml

Привет,
В приложении работаю, все работает нормально. Но по какой-то причине мне приходится использовать входные данные в таблице html. В этом случае всякий раз, когда я нажимаю на ввод, он перерисовывает таблицу и сбрасывает прокрутку таблицы.
Кто-нибудь может здесь помочь?

также видя, что происходит проблема с преобразованием. Это очень раздражает.
video-to-gif

Для прокрутки pb я написал здесь хак: https://github.com/ionic-team/ionic/issues/10629#issuecomment -395084125

Этот комментарий выше AbrahamLopez10, прокомментированный 1 августа 2017 года, отлично работал у меня, прокручивая поля ввода, когда появляется клавиатура Android.

@dylanvdmerwe , @ jgw96 @mhartington @ Тайлер-Дарби @manucorporat @adamdbradley

Привет, ребята, я только что создал специальную директиву для решения этой проблемы на платформах iOS и Android для приложений Ionic 2 и 3. Не могли бы вы проверить, решает ли это все проблемы, связанные с этой проблемой прокрутки.

Я использовал ponyfill с

Установите директиву ion-input-scroll-into-view, выполнив команду npm install ion-input-scroll-into-view

Шаг 1
Прикрепите директиву ion-input-scroll-in-view к области ion-input или ion-textarea следующим образом.

<ion-input ion-input-scroll-into-view></ion-input>

<ion-textarea ion-input-scroll-into-view></ion-textarea>

Шаг 2

Вам необходимо импортировать IonInputScrollIntoViewModule в module.ts вашего родительского компонента следующим образом

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { IonInputScrollIntoViewModule } from 'ion-input-scroll-into-view';

@NgModule({
  declarations: [
    ParentPage
  ],
  imports: [
    IonicPageModule.forChild(ParentPage),
    IonInputScrollIntoViewModule
  ],
})
export class ParentPageModule {}

Ссылка npm: https://www.npmjs.com/package/ion-input-scroll-into-view
ссылка на github: https://github.com/melwinVincent/ion-input-scroll-into-view

Спасибо за вопрос! Мы переместили исходный код и проблемы для Ionic 3 в отдельный репозиторий. Я перемещаю эту проблему в репозиторий для Ionic 3. Проследите за этой проблемой там.

Спасибо за использование Ionic!

Проблема перемещена по адресу :

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