Ionic Android Keyboard Issues

Я новичок в ионной. Я начал разрабатывать и разрабатывать свое приложение, но вскоре у меня возникла проблема. Я действительно не знаю, как работает iPhone, потому что я тестирую это только на своем устройстве Android.Ionic Android Keyboard Issues

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

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

В основном это «джемы» мое приложение внешний вид. Поэтому я подумал о том, как другие справились с этим. От googling я обнаружил, что я могу скрыть вещи, когда клавиатура активна, когда класс «спрятаться на клавиатуре» будет открыт для моего div с, но это будет display: none, сохраняя при этом его ширину, высоту и место.

Мой вопрос: есть ли способы буквально «удалить» мои элементы, когда моя клавиатура открыта, и «восстановить» их, когда моя клавиатура закрыта? Я попытался

window.addEventListener('native.keyboardshow', function(){ 
    document.body.classList.add('keyboard-open'); 
}); 

if(angular.element(document.querySelector("body")).hasClass("keyboard-open")) { 
    angular.element(document.querySelector("div.tab-nav.tabs").remove()); 
}

добавить keyboard-open класс к моему элементу тела и удалить мои вкладки (хотя я думаю, что я должен следить за изменениями класса Вкладки для remove() действий для того, чтобы работать, но я нашел только JQuery способы делай это, и я считаю, что это противоречит правилам углового?), но это не сработало.

Итак, каковы общие способы борьбы с этим? Поскольку я все время думал об этом, я считаю, что просто удалять и восстанавливать определенные элементы или, возможно ли это или нет, клавиатура придет на вершину элемента тела (так же, как различия в z-index) на самом деле не будет очень приятным опытом.

Заранее благодарим за помощь.

источник

2016-05-26 ohnu93

Если вы не нашли что-то, попробуйте этот http://codepen.io/anon/pen/JXwGWJ – Atula

@Atula Thx для вашего предложения, но ваше предложение имеет боковое меню вместо вкладок вправо? Но я действительно не думаю, что он отвечает на мой вопрос, так как это все равно вызовет проблемы с тем, что моя полоса прокрутки и область ввода будут сжаты при открытии клавиатуры. Любые предложения о том, как этого избежать? (Пожалуйста, посмотрите на приблизительный эскиз моего макета приложения выше.) – ohnu93

ну, это было не о sidemenu или tab. это было как исправить клавиатуру. Но, возможно, это не сработало для вас. – Atula

Я решил это путем «удаления» и «восстановления» моего содержимого как yurinondual предлагает в this link from ionic forum.

Предложение было с помощью манипуляций CSS:

.keyboard-open .tabs{ 
    display:none; 
} 
.keyboard-open .has-tabs{ 
    bottom:0; 
} 
body.keyboard-open .has-footer{ 
    bottom: 0; 
}

источник

2016-05-27 06:46:25 ohnu93

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

Мое решение:

Index.html Добавлен нг-класс слушать атрибут showTabs.

<body ng-app="app" ng-cloak ng-class="{ 'is-keyboard-open': showTabs }">

style.css Добавлены следующий фрагмент так вкладки скрыты в случае клавиатуры открытого

.is-keyboard-open .tabs{ 
    display:none; 
} 
.is-keyboard-open .has-tabs{ 
bottom:0; 
}

приложения.js В app.js, в методе app.run, я добавил window.eventListener в native.keyboardshow и спрятался, чтобы нацеливаться в реальном времени всякий раз, когда клавиатура срабатывает или скрывается.

Обратите внимание, что я использовал isAndroid(), потому что у меня была только эта проблема в android.

$rootScope.showTabs = true; 
    if(ionic.Platform.isAndroid()){ 
     window.addEventListener('native.keyboardshow', keyboardShowHandler); 
     window.addEventListener('native.keyboardhide', keyboardHideHandler); 

     function keyboardShowHandler(e){ 
     $rootScope.showTabs = true; 
     } 

     function keyboardHideHandler(e){ 
      $rootScope.showTabs = false; 
     } 
    }

Теперь все работает должным образом.

Примечание: Я попытался ранее: - добавить еще г-индекс @ .tabs - нацелено на .tabs через CSS только - позиция: фиксированное + дно: 0 @ закладки - много ответов на ионных форумах и переполнение стека

Это было лучшее решение, которое я нашел.

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

источник

2016-12-21 16:36:31

ответ

Смежные вопросы