Ionic-framework: Автоматически скрывать вкладки при открытой клавиатуре

Да, я предполагаю, что вы находитесь под Android. Проблема со старой клавиатурой...

Я видел разговор на конференции PhoneGap от
Я могу подтвердить, что нижняя панель вкладок также поднимается при открытии клавиатуры в моем приложении под Android. Но гораздо хуже закрываются поля ввода, которые находятся ближе к низу. Тим сказал, что этого следует избегать, но, к сожалению, в моем проекте есть длинные списки для редактирования.
Я отложил всю тему клавиатуры, чтобы подождать и посмотреть, как она будет работать в ionic.

Кроме того, @tlancina , есть ли руководство по использованию клавиатуры в ionic (интеграция плагина ionic keyboard, обработчиков событий инициализации/настройки)?

Я также испытываю эту проблему.

У нас такая же проблема и в нашем проекте. Есть планы на этот счет?

Эй, ребята, я тоже чувствую боль, случайно нет новостей?

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

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

Для людей, которые ищут временное решение, вот что я сделал:

Конструктор TabsComponent:

platform.ready().then(() => {
            Keyboard.onKeyboardShow().subscribe(() => {
                document.body.classList.add('keyboard-is-open');
            });

            Keyboard.onKeyboardHide().subscribe(() => {
                document.body.classList.remove('keyboard-is-open');
            });
});

Внутри CSS:

body.keyboard-is-open ion-tabbar {
  display: none;
}

body.keyboard-is-open scroll-content {
  margin-bottom: 0 !important;
}

Это не сработает, если у вас есть несколько вкладок на странице, но я думаю, вы можете выбрать их напрямую с помощью CSS.

В настоящее время я использую Ionic beta 11.

какие-либо обновления по этому поводу?

@ bvx89 Спасибо.
Ради тех, кто на Rc0 есть небольшое изменение в css

body.keyboard-is-open .tabbar {
  display: none;
}

body.keyboard-is-open .scroll-content {
  margin-bottom: 0 !important;
}

Официального решения пока нет

Просто отметим, что включение полноэкранного режима на Android также решает эту проблему для меня.
Это можно сделать, установив
<preference name="Fullscreen" value="true" />
в config.xml и, при желании, добавив Cordova-plugin-fullscreen, если вы используете платформу Cordova Android старше версии 5.0.0.

Будет ли это исправлено в следующей версии вместе с остальными проблемами с клавиатурой, которые будут исправлены (прочитайте что-то о проблемах с клавиатурой в другой ветке) или это затерялось между трещинами?

@РаймондАтиви
у меня такая же проблема, это будет исправлено в следующей версии?

У меня не работает в RC3.
onKeyboardShow() никогда не запускается...

+1, у меня такая же проблема.

Интерфейс командной строки Кордовы: 6.3.1
Версия ионного интерфейса командной строки: 2.1.8
Ionic App Lib Версия: 2.1.4
версия ios-deploy: не установлена
версия ios-sim: не установлена
ОС: Windows 8.1
Версия узла: v6.4.0
Версия Xcode: не установлена

У меня такая же проблема, и обходной путь, опубликованный @RaymondAtivie, работает не совсем правильно. вкладки больше не видны, но кажется, что верхняя граница все еще видна. У кого-нибудь еще есть эта проблема? я пытался добавить
box-shadow: none; border-top: none;
и все равно получите ту же верхнюю границу, видимую на панели вкладок. Любые идеи?

Я решил эту проблему, включив опцию fullscreen="true" ion-content fullscreen="true"
и установка скрытого стиля для панели вкладок

      var tabbars =     document.getElementsByClassName('tabbar');
      for(var i=0; i<tabbars.length; i++) {
        var node = <HTMLElement>tabbars[i];
        node.style.display = hide === true && 'none' || 'block';
      }

Я пробовал это, и у меня по-прежнему отображается та же верхняя граница, хотя для панели вкладок установлено значение false.

@payneBrandon я
<ion-header *ngIf="isShowHeader()">

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

этот бар выглядит как часть формы
не могли бы вы поделиться своим html-кодом?

Наконец-то разобрался. Мне не нужно было беспокоиться о заголовке, так как мои вкладки внизу, НО мне нужно было посмотреть на нижний колонтитул (да!). Я применил условный класс к нижнему колонтитулу, чтобы скрыть его, если в теле есть класс «клавиатура открыта» и BAM, снова в деле. Спасибо за помощь!

@payneBrandon удачи

Тоже хотелось бы увидеть эту функцию.
Также я думаю, что ion-footer должен поддерживать видимость при открытии/закрытии клавиатуры.

Я сделал простое исправление (конечно, не идеальное). .scroll-content имеет margin-bottom из 56px , та же высота имеет вкладки. Я проверяю клавиатуру:

public keyboardCheck() {
        return this.keyboard.isOpen();
}

а затем прикрепите этот класс к ion-content , родителю .scroll-content :

.keyboard-open .scroll-content {
    margin-bottom: 0px !important;
}

и добавьте это к ion-content :

<ion-content padding [ngClass]="{'keyboard-open': keyboardCheck()}">

Я также скрыл вкладки, когда клавиатура открыта, используя тот же метод в tabs.html :

<ion-tabs [ngClass]="{'remove-tabs': keyboardCheck()}">

.remove-tabs .tabbar {
    display: none;
}

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

Работает как на iOS, так и на Android.

РЕШЕНО

это правильное решение, кроме отмеченного css.

```
импортировать {Компонент} из '@angular/core';
импортировать {Keyboard} из 'ionic-native'
импортировать {HomePage} из '../home/home';
импортировать {AboutPage} из '../о/о';
импортировать {ContactPage} из '../contact/contact';

@Компонент({
Url-шаблона: 'tabs.html'
})
класс экспорта TabsPage {
// это сообщает компоненту вкладок, какие страницы
// должна быть корневой страницей каждой вкладки
tab1Root: любой = домашняя страница;
tab2Root: любой = AboutPage;
tab3Root: любой = ContactPage;
значениефорнгиф=истина;

конструктор (общедоступная клавиатура: Клавиатура) { }
ionViewDidEnter () {
Keyboard.onKeyboardShow().subscribe(()=>{this.valueforngif=false})
Keyboard.onKeyboardHide().subscribe(()=>{this.valueforngif=true})
}}

this my tabs.html

    ```
 <ion-tabs *ngIf="valueforngif">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle" [tabsHideOnSubPages]="true"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

nice @efnan34 , хотя вам не нужно

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

ionViewDidEnter(){
    Keyboard.onKeyboardShow().subscribe(()=>{this.valueforngif=false})
    Keyboard.onKeyboardHide().subscribe(()=>{this.valueforngif=true})
}

@ bvx89 Ваше решение - единственное, с которым я мог работать с Ionic 2.1.0. Для ionic-native зарегистрирована ошибка, и изменения не обнаруживаются, поэтому другие обходные пути у меня не сработали. С нетерпением жду официального исправления для этого

У меня та же проблема @Killmore
а официального решения по этому поводу еще нет?

Привет
Приведенное выше решение также работает на Ionic 2.1.0, но лучший результат [скрытый] attrb можно использовать вместо * ngif. Я использую это решение в своем проекте, оно отлично работает.

Хорошего дня

Приведенное выше вызовет мерцание на некоторых устройствах Android, и это действительно плохой вариант.

Это будет работать .. попробуйте это

var originalHeight = document.documentElement.clientHeight;
var originalWidth = document.documentElement.clientWidth;
$(окно).изменить размер(функция() {
// Управление переключателем ландшафтного/портретного режима
если (document.documentElement.clientHeight == originalWidth &&
document.documentElement.clientWidth == originalHeight) {
originalHeight = document.documentElement.clientHeight;
originalWidth = document.documentElement.clientWidth;
}
// Проверяем, меньше ли доступная высота (отображается клавиатура), чтобы скрыть нижний колонтитул.
если (document.documentElement.clientHeight < originalHeight) {
$('.footer').скрыть();
} еще {
$('.footer').show();
}
});

Вот как я решил эту проблему:

таб.тс

import { Component, ElementRef, Renderer, ViewChild } from '@angular/core';
import { Events, Tabs } from 'ionic-angular';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  @ViewChild('myTabs') tabRef: Tabs;
  mb: any;
  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor(private elementRef: ElementRef, private renderer: Renderer, private event: Events) {

  }
  ionViewDidLoad() {
    let tabs = this.queryElement(this.elementRef.nativeElement, '.tabbar');
    this.event.subscribe('hideTabs', () => {
      this.renderer.setElementStyle(tabs, 'display', 'none');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      this.mb = content.style['margin-bottom'];
      this.renderer.setElementStyle(content, 'margin-bottom', '0')
    });
    this.event.subscribe('showTabs', () => {
      this.renderer.setElementStyle(tabs, 'display', '');
      let SelectTab = this.tabRef.getSelected()._elementRef.nativeElement;
      let content = this.queryElement(SelectTab, '.scroll-content');
      this.renderer.setElementStyle(content, 'margin-bottom', this.mb)
    })
  }
  queryElement(elem: HTMLElement, q: string): HTMLElement {
    return <HTMLElement>elem.querySelector(q);
  }
}

конкретная страница.ts

import { Component } from '@angular/core';
import { NavController, Events } from 'ionic-angular';

import { Keyboard } from '@ionic-native/keyboard';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private event: Events, private keyboard: Keyboard) {

  }
  ionViewDidLoad() {
    this.keyboard.onKeyboardShow().subscribe(() => this.event.publish('hideTabs'));
    this.keyboard.onKeyboardHide().subscribe(() => this.event.publish('showTabs'));
  }
}

кредиты для dPary

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

Да, я с @cozzbie, все это просто лайфхаки. Нам нужно реальное официальное решение от команды @ionitron @manucorporat

+1 Нам нужно официальное решение, ни одно из этих исправлений не идеально подходит для использования в производстве.

Текущая версия ionic делает это самостоятельно

21 шек. 2017 г. 17:12 tarihinde "Рубен Каллеварт" [email protected]
язды:

+1 Нам нужно официальное решение, ни одно из этих исправлений не подходит для
производственное использование.

—
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-296201358 ,
или заглушить тему
https://github.com/notifications/unsubscribe-auth/AVskkCpgFZZRbrd56ILc5nIPZICRTclUks5ryLlCgaJpZM4I-H1S
.

Об этом действительно заботятся. Я все еще вижу панель вкладок. Работает последняя версия, как в этом письме ionic-angular 3.2.0.

Он работал очень хорошо с версией 2.xx, но теперь я проверил версию 3.xx.
что-то не так. он не скрывает то, что вы хотите на экране, пока
печатать на клавиатуре. К сожалению, мы нашли другое решение или понизили версию
ваша ионная версия на любую 2.xx

12 мая 2017 г. ÖÖ 3:32 tarihinde "vazad28" [email protected] yazdı:

Об этом действительно заботятся. Я все еще вижу панель вкладок. Последняя версия
версия как на момент написания этой статьи ionic-angular 3.2.0.

—
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/driftyco/ionic/issues/7047#issuecomment-300952251 ,
или заглушить тему
https://github.com/notifications/unsubscribe-auth/AVskkNkEdzsMkkrhGW0l9OUW2BKly-PSks5r46ingaJpZM4I-H1S
.

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

+1 за официальное исправление! Подходы " display:none " вызывают неприемлемое мерцание, а вкладки отображаются один раз, а затем исчезают ... выглядит грубо и хакерски. (у кого-нибудь есть идеи, как избавиться от мерцания? Я не выше хака, если это выглядит хорошо для пользователя)

Есть что-нибудь новое по этому вопросу? все еще жду официального исправления, прежде чем я потеряю надежду и начну внедрять что-то, что повлияет на качество пользовательского интерфейса

@patrickmcd , Властелин

@ viking2917, вы можете попробовать хак, который я предложил, и попробовать установить высоту вкладок на ноль. Это может сработать. Хотя я еще не пробовал.

К сожалению, скрытие вкладок с помощью CSS вызовет ряд проблем. Ionic вычисляет несколько значений, таких как маржа на ion-content и учитывает наличие вкладок (которые скрыты).

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

@Khalid-Nowaf Я просто не ценю спам-комментарии, которые отнимают время у команды Ionic и у ~ 2000 наблюдателей за этим репозиторием.

Комментарий @Floyd1256 является невнимательным спамом. Это ничего не добавляет к разговору. Это просто еще один комментарий «плюс один / мы уже там», который служит только для заполнения наших почтовых ящиков.

Мои минусы — это попытки подтолкнуть других к более внимательному поведению. Прежде чем комментировать, мы должны помнить, что мы разговариваем с ~ 2000 человек, _чье время драгоценно_ . Мы не должны относиться к этому пространству так же легкомысленно, как к личному чату с друзьями. Мы должны спросить себя, поможет ли наш комментарий другим или помешает, продвигает ли он разговор или является просто шумом, действительно ли это необходимо сказать или его лучше было бы озвучить реакцией на

Кажется, есть ветка, решающая эту проблему вместе с некоторыми другими https://github.com/ionic-team/ionic/tree/keyboard-fixes.
Этот коммит, в частности, выглядит очень многообещающе

У меня не хватает смелости идти дальше ionic v1.

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

/* HACK Все, что вам нужно сделать, это таббар, который вы можете использовать для Android /вар дно_сохранено = 0;window.addEventListener('native.keyboardshow', функция (e) {angular.element(document.getElementsByClassName('tab-nav')).addClass('скрыть');bottom_stored = angular.element(document.getElementsByClassName('has-tabs')).css('bottom');angular.element(document.getElementsByClassName('has-tabs')).css('bottom','0px');$scope.$apply();});window.addEventListener('native.keyboardhide', function (e) {angular.element(document.getElementsByClassName('tab-nav')).removeClass('скрыть');angular.element(document.getElementsByClassName('has-tabs')).css('bottom',bottom_stored);$scope.$apply();});/ ВЗЛОМ*/

это работает

В моем случае это происходит только тогда, когда я использую Android, лучшим решением является изменение свойства тега Android в config.xml.

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

Просто добавьте следующие строки, чтобы сборка Android в AndroidManifest.xml имела AdjustPan в android:windowSoftInputMode , это приведет к тому, что клавиатура перекрывает все содержимое, а не поднимает экран вверх.

Для описанного выше подхода

cordova plugin add cordova-custom-config

Затем я только что добавил следующее в свой config.xml

<platform name="android">
    <preference name="android-manifest/application/activity/<strong i="10">@android</strong>:windowSoftInputMode" value="adjustPan" />
    ...
</platform>

Работаем на Android и iOS

Вот что я сделал, чтобы динамически скрыть клавиатуру:

в моем файле TS:

@ViewChild('foot') foo_ter: ElementRef;
  constructor(private platform: Platform, private keyboard: Keyboard) {
    this.platform.ready().then(() => {
      this.keyboard.onKeyboardShow().subscribe(() => {
        this.foo_ter.nativeElement.hidden = true;
      });
      this.keyboard.onKeyboardHide().subscribe(() => {
        this.foo_ter.nativeElement.hidden = false;
      });
    });
  }

затем в моем файле HTML я создаю переменную шаблона с именем ссылаюсь в приведенном выше TS, например:

<ion-footer no-border style="padding:5%;" #footer>
  <ion-item no-lines>
   Don't have an account?
    <button ion-button style="text-align:center;" bold item-end clear no-lines clear (click)="signup()">
      Sign Up
    </button>
  </ion-item>
</ion-footer>

Я надеюсь, что это сработает и для вас :-)

Я дал это так в Ionic V3. Работает отлично.
TS-файл
ionViewDidEnter() {
если (эта.клавиатура.isOpen())
this.showTabs = ложь;
еще
это.showTabs = правда;
}

HTML-файл

дасда

как

неверный ответ

Есть ли какое-либо обновление официального решения для этого?

На сегодняшний день.. с Ionic v
Мне не удалось заставить @ionic-native/keyboard работать. Как заявили многие другие... событие onKeyboardShow() никогда не срабатывает.
также устарел плагин cordova-keyboard-plugin.

Итак, что сработало для меня, так это...
cordova plugin add cordova-plugin-ionic-keyboard --save
опубликуйте это .. Я добавил window.addEventListener, как описано в их файле readme

не забудьте удалить прослушиватель событий, если вы покинете вкладку и вернетесь к ней снова.

````машинопись
// Мои вкладки.ts
показать слушателя () {
console.log('клавиатура видна');
document.body.classList.add('клавиатура открыта');
}
скрыть слушателя () {
console.log('клавиатура скрывает');
document.body.classList.remove («клавиатура открыта»);
}

ionViewDidEnter() {
window.addEventListener('keyboardWillShow', this.showListener);
window.addEventListener('keyboardDidHide', this.hideListener);
}

ionViewWillLeave () {
window.removeEventListener('keyboardWillShow', this.showListener);
window.removeEventListener('keyboardDidHide', this.hideListener);
}
````

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

Любое предложение? @dharapvj

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

В своем основном файле config.xml отредактируйте платформу Android, включив в нее следующее:

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

Это изменяет значение по умолчанию, которое Cordova записывает в ваш AndroidManifest.xml, чтобы управлять глобальным поведением ввода с клавиатуры для вашего приложения.

... и если вы проверите AndroidManifest.xml в своей следующей сборке, вы увидите, что значение по умолчанию android:windowSoftInputMode= "adjustResize" изменено на "adjustPan", что позволяет скрыть панель вкладок.

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

Работает идеально!
Спасибо @codymbearsley

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