Ionic-framework: Проблемы с клавиатурой

Созданный на 3 мая 2017  ·  98Комментарии  ·  Источник: ionic-team/ionic-framework

Ионная версия: (отметьте один с "x")
[] 1.x
[x] 2.x
[x] 3.x

Я отправляю ... (отметьте "x")
[x] отчет об ошибке
[] запрос функции
[] запрос поддержки => Пожалуйста, не отправляйте запросы на поддержку здесь, используйте один из следующих каналов: https://forum.ionicframework.com/ или http://ionicworldwide.herokuapp.com/

Текущее поведение:

Клавиатуры и прокрутка ввода долгое время были проблемой для приложений Ionic, даже начиная с Ionic V1. Недавно мы сосредоточили свое внимание на устранении этих проблем с клавиатурой. Проблемы, которые мы в настоящее время считаем наиболее приоритетными, когда речь идет о клавиатуре и вводе, следующие:

  • входные данные в предупреждениях иногда "шаткие"
  • В формах с большим количеством входов иногда возникают проблемы с прокруткой при фокусировке входных данных ниже на странице
  • Переключение между полями ввода, текстовыми полями и т. Д. Иногда вызывает "подпрыгивание" и другие странные проблемы пользовательского интерфейса.
  • Блокировка ввода в нижней части представления работает некорректно на iOS (клавиатура закрывает ввод)

В настоящее время мы работаем над двойным подходом к изменению логики в структуре, которая обрабатывает эти вещи (в основном для Android), а также над некоторыми модификациями плагина WKWebView, чтобы исправить эти проблемы для iOS. Сейчас мы находимся на этапе, когда у нас есть ветка плагина WKWebView, в которой есть исправления для iOS, и мы готовы к тому, что наше сообщество начнет тестирование этого и предоставит отзывы. Мы создали здесь документ Google, в котором есть инструкции, как это можно проверить. Мы хотели бы получить отзывы об этих исправлениях! Не стесняйтесь оставлять отзывы в качестве комментария к этой проблеме. Спасибо всем за использование Ionic!

help wanted v3

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

В моем случае добавление AppModule ниже import дает относительно лучший пользовательский интерфейс, чем значения по умолчанию.

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

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

В моем случае добавление AppModule ниже import дает относительно лучший пользовательский интерфейс, чем значения по умолчанию.

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

слава богу, наконец, молитвы услышаны

  1. Панель поиска на вкладке перемещает панель вкладок вверх.

Как протестировать на Android?
Мы всегда рады помочь для Android или Desktop. :)

Привет, @ mburger81 , хороший вопрос! Обновленной ночной версии ionic-angular пока нет, но когда мы ее выпустим, я обновлю эту проблему с инструкциями о том, как вы можете установить ее для тестирования на Android.

Хорошо, спасибо, мы работаем над страницей входа, где у нас есть некоторые проблемы с прокруткой ввода.
Думаю, мы можем это проверить.

К вашему сведению, прежде чем мы сможем протестировать его и выпустить для нашего тестировщика, нам необходимо устранить ошибку INVALID VIEWS (счастлив для этапа), потому что это критическая проблема для нас

Понял тебя! Итак, по вопросу прокрутки ввода, можете ли вы попробовать разместить ввод в области вашего обзора, которую клавиатура не закрывает при открытии?

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

Необходимо сделать, чтобы курсор не перекрывал ion-header, при прокрутке

Некоторые отзывы об iOS от одного из членов нашей команды @danbucholtz :

Для отдельных элементов управления, которые обычно не используются в форме (например, поисковый ввод), можем ли мы исследовать закрытие клавиатуры при «отправить» или «ввести»?

При выполнении действия навигации клавиатура автоматически закрывается, если она открыта. Мы должны пересмотреть это поведение в отношении наложений. Например, я не могу представить, что существует множество вариантов использования при открытии модального окна и сохранении клавиатуры открытой. ActionSheet, Alert, Loading, Modal, Popover, Picker и Toast - все это подразумевает начало нового действия (например, выбор времени) или отзыв о завершенном действии (отправка или проверка формы или что-то еще). Думаю есть смысл закрыть клавиатуру в случае открытия оверлея.

chats.html

<ion-footer *ngIf="send.load_spinner==false" class="backgound_send_message">
<ion-toolbar>

<textarea *ngIf="Record.StartRecordGo==false" [(ngModel)]="you_comment" (keydown)="handleKeyDown($event)" (focus)="scrollTobottom()" placeholder="{{'chats.message' | translate }}"  id="my-textarea0" class="my-textarea" rows="1" autosize></textarea>

    <button ion-button clear large color="primary" *ngIf="send.you_comment.length>0" (click)="SendMessageServer(items)"><ion-icon class="SendMess" ios="ios-send-outline" md="md-send"></ion-icon></button>


</ion-toolbar>
</ion-footer>

chats.ts

SendMessageServer(items) {
    this.text_message_me.push(this.you_comment);
   document.getElementById('my-textarea0').focus(); // The keyboard remains open
}

Этот код работает (ОТКРЫТЬ KYEBOARD)

<ion-footer>
<ion-toolbar>
<textarea></textarea>
</ion-footer>
</ion-toolbar>

Хорошо меняет высоту, но лучше делать анимацию при изменении размера

https://forum.ionicframework.com/t/no-documentation-for-scrollassist-autofocusassist-inputblurring-config-settings/88450?u=rohinmohandas

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

Любое решение, связанное с случаем, когда клавиатура скрывает ввод?

Следующий код в app.component.ts произвел желаемые эффекты ввода нижнего колонтитула над клавиатурой как в iOS, так и в Android. По какой-то причине поведение наложения строки состояния в Android влияет на то, как клавиатура скрывает элементы ввода, расположенные ниже высоты клавиатуры.

import {Platform} from "ionic-angular";
import {Keyboard} from "@ionic-native/keyboard";
import {StatusBar} from "@ionic-native/status-bar";
import {SplashScreen} from "@ionic-native/splash-screen";

constructor(platform: Platform,public statusBar: StatusBar, public splashScreen: SplashScreen,
                public keyboard: Keyboard) {

        platform.ready().then(() => {
            if (platform.is("ios")) {
                statusBar.overlaysWebView(true);
                statusBar.styleBlackTranslucent();
            }
            splashScreen.hide();
            keyboard.hideKeyboardAccessoryBar(false); // use only on a need basis if accessory bar is needed.
            .
            .
            .

            }

Необходимо сделать, чтобы курсор не перекрывал ion-header, при прокрутке
key2
key1

Есть шанс, что # 7047 тоже поправят?

Как это на самом деле работает в браузерах? Добавляет ли ionic какие-либо дополнительные функции, которые нарушают ввод данных, или это просто сложная проблема с полями ввода на мобильных устройствах?

Это мое решение, оно отлично работает.

  1. установить hideKeyboardAccessoryBar в true
this.keyboard.hideKeyboardAccessoryBar(true)
  1. создать KeyboardAttachDirective.ts файл
import { Directive, ElementRef, Input } from '@angular/core';
import { Content, Platform } from 'ionic-angular';
import { Keyboard } from '@ionic-native/keyboard';
import { Subscription } from 'rxjs/rx';


/**
 * <strong i="15">@name</strong> KeyboardAttachDirective
 * <strong i="16">@description</strong>
 * The `keyboardAttach` directive will cause an element to float above the
 * keyboard when the keyboard shows. Currently only supports the `ion-footer` element.
 *
 * ### Notes
 * - This directive requires [Ionic Native](https://github.com/driftyco/ionic-native)
 * and the [Ionic Keyboard Plugin](https://github.com/driftyco/ionic-plugin-keyboard).
 * - Currently only tested to work on iOS.
 * - If there is an input in your footer, you will need to set
 *   `Keyboard.disableScroll(true)`.
 *
 * <strong i="17">@usage</strong>
 *
 * ```html
 * <ion-content #content>
 * </ion-content>
 *
 * <ion-footer [keyboardAttach]="content">
 *   <ion-toolbar>
 *     <ion-item>
 *       <ion-input></ion-input>
 *     </ion-item>
 *   </ion-toolbar>
 * </ion-footer>
 * ```
 */

@Directive({
    selector: '[keyboardAttach]'
})
export class KeyboardAttachDirective {
    @Input('keyboardAttach') content: Content;

    private onShowSubscription: Subscription;
    private onHideSubscription: Subscription;

    private attachTime = 0;

    constructor(
        private elementRef: ElementRef,
        private platform: Platform,
        private keyboard: Keyboard
    ) {
        if (this.platform.is('cordova') && this.platform.is('ios')) {
            this.onShowSubscription = this.keyboard.onKeyboardShow().subscribe(e => this.onShow(e));
            this.onHideSubscription = this.keyboard.onKeyboardHide().subscribe(() => this.onHide());
        }
    }

    ngOnDestroy() {
        if (this.onShowSubscription) {
            this.onShowSubscription.unsubscribe();
        }
        if (this.onHideSubscription) {
            this.onHideSubscription.unsubscribe();
        }
    }

    private onShow(e) {
        let keyboardHeight: number = e.keyboardHeight || (e.detail && e.detail.keyboardHeight);

        if(this.attachTime > 1){
            if(
            keyboardHeight == 313 ||
            keyboardHeight == 258 ||
            keyboardHeight == 216 ||
            keyboardHeight == 253 ||
            keyboardHeight == 226 ||
            keyboardHeight == 271 ||
            keyboardHeight == 216 ||
            keyboardHeight == 264){
                this.setElementPosition(0)
            }else{
                if(this.attachTime > 2){
                    this.setElementPosition(0)
                }else{
                    this.setElementPosition(keyboardHeight);
                }
            }
        }else{
            this.setElementPosition(keyboardHeight);
        }
        this.attachTime ++
    };

    private onHide() {
        this.setElementPosition(0);
        this.attachTime = 0
    };

    private setElementPosition(pixels: number) {
        this.elementRef.nativeElement.style.paddingBottom = pixels + 'px';
        this.content.getScrollElement().style.marginBottom = (pixels + 44) + 'px';
        this.content.scrollToBottom()
    }
}
  1. использовать
<ion-header (touchstart)="closeKeyboard()"></ion-header>

...

<ion-content #content (touchstart)="closeKeyboard()"></ion-content>

...

<ion-footer [keyboardAttach]="content" class="messagebar">
    <ion-toolbar no-border>
        <div class="toolbar-inner">
            <div #inputer style="-webkit-user-select: auto;padding:5px;font-size:16px; min-height:1.5em; width:100%;border:1px solid #ccc;background-color:#fff;" contenteditable="plaintext-only" (keyup)="keyup($event)" (focus)="onFocus($event)" (blur)="onBlur($event)"></div>
            <button ion-button small (tap)="send()" [disabled]="!msgContent.length">发送</button>
        </div>
    </ion-toolbar>
</ion-footer>
  1. добавить несколько методов в XXXPage.ts
    onBlur(event) {
        if (this.keyboardOpen) {
            event.target.focus()
        }
    }

    keyup(event){
        this.msgContent = event.target.innerText
    }

    onFocus(event) {
        this.keyboardOpen = true
    }

    closeKeyboard() {
        this.keyboardOpen = false
        this.keyboard.close()
    }

perview.gif ссылка

ссылка preview.mov

@ lh4111 Отлично! А в андроиде тестировали? Вроде не работает.

У нас та же проблема, что и у @aspidvip
@ lh4111 могу я вас спросить, для чего вам решение? Решает ли проблему с вводом под шапкой?

@kitkimwong Я не тестировал на android, но думаю, что принципы должны быть похожи.

@ mburger81

  1. используйте метод this.keyboard.hideKeyboardAccessoryBar(true) предоставленный ion-native/keyboard для
    установить крышку клавиатуры Page
  2. когда курсор фокусируется на вводе, открывается клавиатура. затем установите ion-content padding-bottom, чтобы отобразить ion-footer

Мой английский не очень хороший, надеюсь, ты понимаешь

В любом случае здесь используется плагин WKWebView, который упоминался в первом потоке? Или все эти комментарии относятся к UIWebView?

@ jgw96 Я только что протестировал WKWebView на своем устройстве iOS. Значительно улучшился для меня. Похоже, что поле ввода не остается над клавиатурой так, как вы ожидали, и откладывается, оно как бы появляется в конце. Это известная проблема?

Это только iOS? Я не тестировал на Android, но работает ли там?

Запись:
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

Кордова CLI: 6.4.0
Версия Ionic Framework: 3.0.1
Версия Ionic CLI: 2.1.14
Версия Ionic App Lib: 2.1.7
Версия Ionic App Scripts: 1.3.0
Версия ios-deploy: 1.9.1
версия ios-sim: 5.0.12
ОС: macOS Sierra
Версия узла: v7.4.0
Версия Xcode: Xcode 8.3.2 Версия сборки 8E2002

Привет, @manucorporat, к сведению, результаты моего тестирования. См. Сообщение выше и запись. Наше приложение по сути является приложением для чата, поэтому было бы здорово узнать, можно ли решить эту проблему.

@ jgw96 @manucorporat, не могли бы вы прокомментировать статус этого тестирования и когда исправления brnach появятся в производственной среде? Или что осталось делать? Был бы очень признателен.

@ jgw96 Возможно, вы обновили эту проблему? Кажется, он пропустил рубеж 3.3.0.

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

@nuvoPoint LoL, проблема с клавиатурой

  1. https://github.com/ionic-team/ionic/issues/6228
  2. https://github.com/ionic-team/ionic/issues/5432

И они просто блокируют проблему .. LOL ...
Итак ... Я отказался от ionic из-за проблемы с клавиатурой год назад, и теперь я возвращаюсь сюда, чтобы посмотреть, была ли исправлена ​​клавиатура, но, как вы видите, у них нет никакого прогресса за этот год. :)

Похоже, они не хотят иметь официальное исправление, даже если это базовый компонент для простого приложения !! Он потеряет всех разработчиков, которые хотят создать чат-приложение. Поле ввода - это базовый компонент, который взаимодействует с пользователем, с этой чертовой проблемой мы ТОЛЬКО можем использовать IONIC для создания простых информационных приложений . А может это позиционирование ионика ...? СМЕШНО. Я не знаю.

И если вы видите обсуждение на форуме, многие разработчики сталкиваются с одной и той же проблемой и отвечают:
Использование Ionic для создания простого нативного приложения вроде чата невозможно:

https://forum.ionicframework.com/t/about-to-give-up-with-ionic-3-simple-native-like-chat-page-not-possible/87548

Ребята, над клавиатурой работают, и есть ветка для нее в плагине cordova для wk, если хотите потестить.

cordova plugin add https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard-fixes --save

Это текущие исправления: https://github.com/ionic-team/cordova-plugin-wkwebview-engine/pull/131

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

Отредактировано:

@AmitMY, как бы вы хотели, чтобы я

Протестировал WKWebView на моем устройстве iOS. Значительно улучшился для меня.

Текущий номер:
Похоже, что поле ввода не остается над клавиатурой так, как вы ожидали, и откладывается, оно как бы появляется в конце. Это известная проблема?

Запись:
https://1drv.ms/v/s!AqSDIyRRHLbYazFGbIPhOGLC4sA

глобальные пакеты:
@ ionic / cli-utils: 1.2.0
Кордова CLI: 7.0.1
Ионный интерфейс командной строки: 3.2.0

локальные пакеты:
@ ionic / app-scripts: 1.3.7
@ ionic / cli-plugin-cordova: 1.2.1
@ ionic / cli-plugin-ionic-angular: 1.2.0
Платформы Кордовы: ios 4.4.0
Ionic Framework: ионно-угловой 3.0.1

Система:
Узел: v7.4.0
ОС: macOS Sierra
Xcode: Xcode 8.3.2 Версия сборки 8E2002
iOS-развертывание: 1.9.1
ios-sim: 5.0.12

@jrmcdona Я думаю, вам стоит отправить сюда обратную связь. @manucorporat посмотрит на это, когда сможет
Постарайтесь сделать это как можно более профессионально, например - это здорово, что у вас есть видео, но также объясните, что в видео не так (чтобы мы могли отслеживать проблемы, не просматривая записи каждый раз)

Есть ли надежды на решение проблемы с открытыми вкладками и клавиатурой?

@ Floyd1256 Ссылка здесь со всей имеющейся у вас информацией. Весь этот поток, вероятно, будет рассмотрен в конце следующей недели, и исправления будут внесены в соответствии с отзывами.

Мне нужна функция чата в моем ионном приложении.
Я тестировал cordova-plugin-wkwebview-engine.git # keyboard-fixes в своем проекте, были внесены большие улучшения.
И все же есть кое-что, что мы не можем сделать по сравнению с собственным управлением клавиатурой.
Моя ссылка - это функция обмена сообщениями на моем телефоне, но то же самое и с самыми известными чат-приложениями:
Когда мы нажимаем, чтобы написать новое сообщение, появляется клавиатура и подталкивает нижний фиксированный вводимый текст И последние сообщения, НО не верхний фиксированный заголовок.
Анимация push плавная, и мы можем видеть последние сообщения, даже когда вводим новое сообщение.
Чтобы получить пример, просто напишите и отправьте SMS с любого телефона.

Я хотел бы иметь такое же поведение с ионной клавиатурой на устройствах Android, iOS и Windows.
На нынешней ионной клавиатуре анимация нажатия дергается, и клавиатура подталкивает нижний фиксированный ввод, но закрывает последние сообщения (на всех устройствах).
Для тестирования просто добавьте текстовый ввод в нижний колонтитул ionic и введите текст.
Проблема большая, но конечные пользователи не могут принять клавиатуру как есть, разрыв с родной клавиатурой очевиден.
В противном случае спасибо за отличный ionic framework.

Осталось создать анимацию при изменении размера и возможность отключить изменение размера при появлении клавиатуры, чтобы вкладки вверх не появлялись! Или дать возможность отключить отображение вкладок при отображении клавиатуры

Недавно пропадает прокрутка вбок

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

@ Khalid-Nowaf ваш основной вид не увеличивается в этом дизайне, когда клавиатура поднимается вверх. Таким образом, в сценарии чата или SMS вы закрываете все свои сообщения. Например, в iOS SMS сообщения выталкиваются вверх вместе с текстовым полем очень плавно - так что вы всегда можете увидеть последнее отправленное сообщение. Тогда клавиатура не опускается после ввода текста, она остается там, пока вы не продолжите печатать и не уйдете. Я лично считаю, что ионный дизайн должен имитировать iOS и Android (хотя я не могу говорить об Android, поскольку никогда не использовал его). Я также ничего не знаю о сложностях, которые необходимо сделать, чтобы это произошло с точки зрения разработки, но надеюсь, что это станет ближе. Значительно улучшился для меня с WKWebView.

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

Кто-то на форуме говорит, что есть отличный плагин, исправляющий проблему с клавиатурой.
Https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard
Плохая новость в том, что этот плагин платный.

Кроме того, просто протестировав «ветвь фиксированной клавиатуры» ionic, все еще остается большая проблема и плохой пользовательский опыт.

@kitkimwong Вау, выглядит неплохо, за исключением того, что это довольно дорого (особенно с учетом того, что ionic бесплатен). @manucorporat, вам обязательно стоит взглянуть на это

Этот плагин указан в документации ionic. Я попробую сегодня и посмотрю, как пойдет. Думаю, для некоторых компаний 200 долларов не так уж и дороги. За это придется заплатить два часа времени разработчиков, и я предполагаю, что вы могли бы часами возиться с клавиатурой без плагина.
http://ionicframework.com/docs/native/native-keyboard/ Не поймите меня неправильно, я бы не стал платить, но мог бы!

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

  • чат приложение нравится
  • формы и множество входных данных "форма ионного E2E теста"
  • wkwebview для ios ** новое
  • RTL

вот некоторые из моих демо



ссылка репо: https://github.com/Khalid-Nowaf/ionic-keyboard

все, что вам нужно сделать после клонирования репо
sh ionic cordova run ios --prod ionic cordova run android --prod

7047

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

На ум приходит старая поговорка: «Когда есть молоток, все выглядит как гвоздь»; так что, возможно, нам нужно подойти ко всему этому по-другому.

@larssn - это то, что делает платный плагин клавиатуры. Так что вроде хороший вариант.

@jrmcdona Может быть, да. Хотя лучше бы иметь собственное решение, работающее на 100%. В прошлом я стал зависеть от нескольких плагинов, которые пришли в негодность, и их обслуживание было маленьким кошмаром.

@larssn не предлагал использовать плагин. Предлагал вашу идею для ionic, чтобы этот дизайн звучал хорошо, и это то, что делает плагин.

Пока мы не получим обратную связь от команды ionic о текущих проблемах с клавиатурой, - Если кто-то хочет протестировать платный плагин, я создал репозиторий здесь. Однако по какой-то причине я не могу отобразить клавиатуру изначально. Мне нужно нажать «Переключить» в правом верхнем углу, чтобы он появился. Не могу понять, почему он не отображается при загрузке страницы. Нравится демо.

https://github.com/jrmcdona/keyboard-test

Решение, которое сработало для меня:

  • Используйте input вместо ion-input

@SoldierCorp, вы имеете в виду, что в тестовой ветке WkWebView предусмотрена ionic? Или UIWebView?

@jrmcdona В шаблоне компонента сам элемент html.

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

Согласен с этим на 100%. Если это недостижимо из-за определенных сложностей, с которыми они столкнулись, нам всем было бы полезно узнать об этом.

@AmitMY @manucorporat По поводу тестовой ветки WKWebView. Поверьте, клавиатура не должна закрываться после нажатия кнопки отправки.
Точно так же, как во время SMS-разговора в iOS. Если разработчик не хочет такого поведения, он может вызвать метод закрытия клавиатуры, но по умолчанию он должен оставаться открытым, чтобы люди могли греметь сообщениями во время сценария чата без подпрыгивания клавиатуры вверх и вниз.

Какой статус у этой ветки? Можно ли будет видеть последние новости о клавиатуре? @AmitMY @manucorporat @ jgw96

@jrmcdona, он был объединен в master. Вы можете попробовать:
[email protected]

Хорошо! 👍🏼

@manucorporat Могу ли я просто установить с помощью npm
Я пробовал это, но это было неверно. Не знаю, как это получить, кроме сборки, которую вы хотите, чтобы я протестировал.

@jrmcdona запустите npm v ionic-angular versions --json чтобы узнать, какие версии опубликованы

@jrmcdona

npm install ionic-angular<strong i="7">@nightly</strong>

Хорошо, спасибо @manucorporat . Я удалил тестовую ветку WKWebView и добавил ее обратно с последней версией.
<plugin name="cordova-plugin-wkwebview-engine" spec="^1.1.3" />

Затем я обновил Angular до версии 4.1.3, чтобы можно было устанавливать каждую ночь.

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

У кого-нибудь есть рабочий репо клавиатуры хорошо работает?

Это известная проблема, есть ли список известных проблем?
Должен ли я регистрировать новые проблемы?

Вот видео.
https://1drv.ms/v/s!AnyXOztVClZYbfswP -UEtaHEU0I

Вот код:

<div class="chat-window-container" style="padding-top:20px">
  <div class="chat-window">
    <div class="message-list">

      <chat-message *ngFor="let message of messages | async" [message]="message">
      </chat-message>

    </div>

    <message-input>

      <div style="flex:1;padding-left:5px;">
        <ion-input [(ngModel)]="draftMessage.text" (keydown.enter)="onEnter($event)" autofocus="" placeholder="Type to chat..." maxlength="2000"></ion-input>
      </div>
      <div (click)="onEnter($event)" style="display:table;width:50px;height:100%">
        <ion-icon name="send" color="primary" class="message-send-icon"></ion-icon>
      </div>
    </message-input>
  </div>
</div>

Спасибо всем

@jrmcdona да, еще не релиз, мы готовим новый плагин для клавиатуры:

  1. Обновите CLI:
    ``
    npm install -g ionic

2. Make sure you are using ionic-framework nightly or 3.4

3. Make sure you are using the latest WK plugin

4. Remove ionic-keyboard-plugin: **SUPER IMPORTANT STEP!!!!**

5. Install the new keyboard plugin: 
 ```
ionic cordova plugin add https://github.com/ionic-team/cordova-plugin-keyboard --save

ПОЖАЛУЙСТА! дайте мне знать, как это работает для вас

@manucorporat
Версия 3.4 еще не опубликована.

Nightly и другие недавно опубликованные версии не подходят для меня как недействительные. Смотрите скриншот

screen shot 2017-06-14 at 7 27 24 pm

@jrmcdona пробовали ли вы удалить node_module и снова запустить npm install? убедитесь, что вы используете --save в ionic-angular @ nightly.

Однако сегодня выйдет 3.4.

Пользовательский интерфейс

Я не знал, как импортировать клавиатуру в приложение, чтобы играть с методами Show / Hide.
(т.е. импортировать {Keyboard} из '@ ionic-native / keyboard';)

Похоже, что если вы нажмете кнопку отправки, клавиатура автоматически закроется (я не закрываю ее в коде, поскольку у меня нет клавиатуры, импортированной в приложение для использования методов Keyboard.Show и т. Д.) Можно ли будет сохранить клавиатура открыта вроде как работает iOS SMS?

Вот запись.
https://1drv.ms/v/s!AnyXOztVClZYcY3vYXiXYaAZNdE

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

Хорошая работа, Ману!

@manucorporat действительно большие улучшения, не могли бы вы добавить возможность проталкивать контент (за исключением заголовка), чтобы мы могли видеть последние сообщения, когда клавиатура открыта, а вводимый текст зафиксирован внизу?

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

@aspidvip Ману упоминает об этом несколько постов назад. Я скопирую сюда.

Обновите CLI:
npm install -g ionic
Убедитесь, что вы используете ionic-framework каждую ночь или 3.4.

Убедитесь, что вы используете последнюю версию плагина WK.

Удалите ionic-keyboard-plugin: СУПЕР ВАЖНЫЙ ШАГ !!!!

Установите новый плагин клавиатуры:

плагин ionic cordova добавить https://github.com/ionic-team/cordova-plugin-keyboard --save

И как получить доступ к новой клавиатуре плагина?

Хорошо, если клавиатура будет добавлена ​​как дочерняя в div: ~

~ Например, работа плагина Google Maps

Как идет работа с клавиатурой?

Фантастическая работа @manucorporat . Я только что обновился с 3.2 до 3.5 каждую ночь (@ 3.5.3-201707261447), и, похоже, он работает так, как задумано, в большинстве форм, которые есть в моем приложении.

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

Спасибо за всю работу, вложенную в этот @manucorporat! (И все, кто это тестировал).

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

@ Peege151 Я бы хотел увидеть демо-версию приложения!

Хорошо, это может шокировать, но я все еще использую Ionic 2.2.1 и в настоящее время не могу обновиться до последней версии, потому что думаю, что это приведет к появлению новых ошибок, которые я не могу себе позволить в данный момент.
Этот https://github.com/driftyco/cordova-plugin-wkwebview-engine.git#keyboard -fixes, похоже, работает, но я боюсь, что оно все равно приведет к сбою приложения на iOS с ошибкой «Выполнено больше задач, чем было запланировано» .

Могу ли я использовать https://github.com/driftyco/cordova-plugin-wkwebview-engine.git по- прежнему с Ionic 2.2.1? Любой шанс?

Поэтому я попробовал последнюю версию этого плагина 1.1.3 с Ionic 2.2.1, следовал инструкциям в репозитории github, добавил код ниже и удалил ionic-plugin-keyboard (я предположил, что это то, что имел в виду @manucorporat в своем комментарии) - установил npm для плагина, собрал приложение и попробовал.
На симуляторе iOS с версией iOS 10+ он работал, как и ожидалось, без проблем и сбоев. Мне все еще нужно попробовать его на реальном телефоне (раньше мое приложение вылетало при использовании решения здесь https://stackoverflow.com/questions/36706398/in-ionic-2-how-to-float-an-element-above- the-keyboard-when-the-keyboard-shows / 36804830 # 36804830)
Совет по исчезновению клавиатуры, добавьте это к кнопке
(mousedown)="$event.preventDefault()"

Config.xml включен

<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine"/>
</feature>
<plugin name="cordova-plugin-wkwebview-engine" spec="~1.1.3"/>
<plugin name="cordova-plugin-keyboard" spec="https://github.com/ionic-team/cordova-plugin-keyboard"/>
<allow-navigation href="http://localhost:8080/*"/>

У меня три вопроса, если кто может помочь:
1- Будет ли работать нормально на Android после удаления клавиатуры-плагина ionic?
2- Правильно ли это <allow-navigation href="http://localhost:8080/*"/> ? с localhost: 8080 ?
3- Следует ли мне удалить этот код ниже из config.xml

<feature name="Keyboard">
  <param name="ios-package" onload="true" value="IonicKeyboard"/>
</feature>

Если ваша проблема на android, то вам поможет. В файле ionic config.xml добавьте следующие строки в тег platform name = "android".

<platform name="android"> 
  <edit-config file="AndroidManifest.xml" mode="merge"    target="/manifest/application/activity"> <activity android:windowSoftInputMode="adjustPan" /></edit-config>
  ...the rest of the android configs...
</platform>

Это не позволит клавиатуре выталкивать все вверх и просто накладывает клавиатуру на контент. Таким образом, поведение будет таким же или похожим на клавиатуру ios

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

Я не думаю, что Ionic - лучшее место для приложения чата. Я никогда не мог понять это правильно и считаю, что в течение нескольких лет мне приходилось бороться со всеми постами и комментариями. Просто мое личное мнение. Если бы существовал образец рабочего приложения чата для ionic на iOS и Android, которое действительно могло бы помочь людям.

Да, вообще-то, мы заплатили за это, и это было неплохо! Это был бы лучший путь для людей, которые могут себе это позволить. Во всяком случае, по моему опыту.

Где-то в плагине клавиатуры EddyVerbruggen Макс Линч задумал сделать этот плагин частью пакета чата Ionic. Я спросил об этом в той ветке, а также написал ему в Твиттере. Не получил ответа. Я не уверен, о чем был весь пакет чата. Прошло некоторое время с тех пор, как я обратил внимание, так что, возможно, есть новости об этом ...

Если я правильно помню, я видел где-то в твиттере примерно неделю назад, что Ionic работает над обновлением / новым плагином клавиатуры ... если я не ошибаюсь, держите его в покое, подождите и посмотрите

привет, у меня есть проект IONIC v1, и я обнаружил, что кнопка возврата иногда не работает. Это меня долго беспокоило , мне нужна помощь, спасибо

@miaozhenkun это репо для Ionic v3 +, для v1 используйте https://github.com/ionic-team/ionic-v1

@astec Ты китаец? большое спасибо

у клавиатуры есть проблема с ионной текстовой панелью

<ion-card class="cards " > <div class="relative"> <div class="image_container"> <img class="imageFull" src="http://via.placeholder.com/200x200" /> </div> <ion-row class=" absolute bottom0 "> <ion-item> <ion-textarea placeholder="Message..." > </ion-textarea> </ion-item> </ion-row> </div> </ion-card>

Я использую список вышеуказанной карты с нижним CSS
.родственник{
позиция: относительная ! важная;
}
.absolute {
позиция: абсолютная ! важная;
}
.bottom0 {
внизу: 0;
}

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

Я заметил, что проблема существует только в том случае, если мы используем positon relative для любого родителя ion-textarea.

какие-нибудь обходные решения с относительной позицией?

Эй, ребята!
кто-нибудь нашел решение для этого.
Ваша помощь ценится.

Пакеты cli: (/usr/local/Cellar/node@6/6.12.2/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

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

cordova (Cordova CLI) : 8.0.0

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

@ionic/app-scripts : 3.1.6
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2

Система:

Android SDK Tools : 26.1.1
Node              : v6.12.2
npm               : 5.5.1 
OS                : macOS Sierra
Xcode             : Xcode 9.2 Build version 9C40b

Переменные среды:

ANDROID_HOME : /Users/santhoshgl/Library/Android/sdk

Разное:

backend : legacy`

добавить к кнопке клика (mousedown)="$event.preventDefault(); yourFunction()"

Любые новости?

Я думаю, вам захочется подождать и использовать Avocado @mladilav

У нас возникла проблема с нашей клавиатурой iOS в ion-input, короче говоря, ввод не будет иметь каретки, отображаемой после того, как клавиатура появится, пользователь может правильно ввести в поле. Я пробовал различные ионные версии, версии для веб-просмотра и т. Д. - все безрезультатно. Я действительно считаю, что это проблема, когда, если нужно прокрутить ионный ввод, у него будут проблемы, если ионный ввод был в самом верху страницы, похоже, что это не проблема.

Однако я нашел одну вещь, которая полностью устранила нашу проблему: я создал это приложение в Xcode 8.3.3. Все предыдущие сборки, которые я пробовал, использовали от Xcode 9.0 до последней версии Xcode 9.3, которая вышла пару дней назад. Проблема с этим исправлением заключается в том, что в ближайшем будущем Apple может отказаться от формы приложений, отправляемых из Xcode 8. У кого-нибудь есть другие идеи?

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

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

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

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

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