Ionic-framework: कीबोर्ड के खुले होने पर स्वचालित रूप से टैब छिपाएं

हाँ, मुझे लगता है कि आप Android के अधीन हैं। कीबोर्ड की पुरानी समस्या...

मैंने कीबोर्ड के बारे में @tlancina के PhoneGap बात देखी और यह सामान्य रूप से एक बहुत कठिन मुद्दा लगता है!
मैं पुष्टि कर सकता हूं कि एंड्रॉइड के तहत भी मेरे ऐप में कीबोर्ड खोलने पर नीचे टैब बार को धक्का दिया जाता है। लेकिन इससे भी बदतर इनपुट फ़ील्ड को कवर करना है जो नीचे के पास हैं। टिम ने कहा, किसी को इससे बचने की कोशिश करनी चाहिए, लेकिन दुर्भाग्य से मेरे प्रोजेक्ट में संपादित करने के लिए लंबी सूचियां हैं।
मैंने पूरे कीबोर्ड विषय को प्रतीक्षा करने और यह देखने के लिए स्थगित कर दिया है कि यह आयनिक में कैसे चलता है।

इसके अलावा, @tlancina , क्या आयनिक में कीबोर्ड का उपयोग करने के बारे में एक सर्वोत्तम अभ्यास ट्यूटोरियल है (आयनिक कीबोर्ड प्लगइन को एकीकृत करना,

मैं भी इस मुद्दे का अनुभव कर रहा हूं।

हमारे प्रोजेक्ट में भी यही समस्या है। इस संबंध में कोई योजना?

हे दोस्तों, दर्द भी महसूस हो रहा है - संयोग से कोई खबर?

इस महान सुविधा, टैब की भी आवश्यकता है और छिपाने में सक्षम होने के लिए हेडर भी अच्छा हो सकता है।

@ 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');
            });
});

सीएसएस के अंदर:

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

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

यदि आपके पास किसी पृष्ठ पर एकाधिक टैब हैं तो यह काम नहीं करेगा, लेकिन मुझे लगता है कि आप उन्हें सीधे अपने सीएसएस के साथ चुन सकते हैं।

मैं वर्तमान में आयोनिक बीटा 11 चला रहा हूं

इस पर किसी भी अद्यतन?

@ बीवीएक्स89 धन्यवाद।
Rc0 लिए css . में थोड़ा सा बदलाव किया गया है

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

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

अभी तक कोई आधिकारिक समाधान नहीं

केवल यह उल्लेख करने के लिए कि एंड्रॉइड पर फुलस्क्रीन मोड को सक्षम करने से भी मेरे लिए यह समस्या ठीक हो जाती है।
यह सेटिंग द्वारा किया जा सकता है
<preference name="Fullscreen" value="true" />
config.xml में, और वैकल्पिक रूप से कॉर्डोवा-प्लगइन-फुलस्क्रीन जोड़ना यदि आप v5.0.0 से पुराने कॉर्डोवा एंड्रॉइड प्लेटफॉर्म का उपयोग कर रहे हैं।

क्या यह अगले संस्करण में ठीक होने जा रहे बाकी कीबोर्ड मुद्दों के साथ तय किया जा रहा है (किसी अन्य थ्रेड में कीबोर्ड मुद्दों के बारे में बताते हुए कुछ पढ़ें) या यह दरारों के बीच गिर गया है?

@RaymondAtivie
मेरे पास एक ही समस्या है, क्या यह अगले संस्करण में तय किया जा रहा है?

यह मेरे लिए RC3 में काम नहीं कर रहा है।
ऑनकेबोर्डशो() को कभी नहीं निकाल दिया जाता है ...

+1， मेरे पास एक ही समस्या है।

कॉर्डोवा सीएलआई: 6.3.1
आयोनिक सीएलआई संस्करण: 2.1.8
आयोनिक ऐप लिब संस्करण: 2.1.4
आईओएस-तैनाती संस्करण: स्थापित नहीं
आईओएस-सिम संस्करण: स्थापित नहीं
ओएस: विंडोज 8.1
नोड संस्करण: v6.4.0
एक्सकोड संस्करण: स्थापित नहीं

मेरे पास भी यही मुद्दा है, और @RaymondAtivie द्वारा पोस्ट किया गया वर्कअराउंड बिल्कुल सही काम नहीं कर रहा है। टैब अब दिखाई नहीं दे रहे हैं, लेकिन ऐसा प्रतीत होता है कि एक शीर्ष सीमा अभी भी दिखाई दे रही है। क्या किसी का कोई मुद्दा है? मैंने जोड़ने की कोशिश की है
box-shadow: none; border-top: none;
और फिर भी टैबबार से दिखाई देने वाली उसी शीर्ष सीमा के साथ समाप्त होती है। कोई विचार?

मैंने 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';
      }

मैंने यह कोशिश की है और अभी भी वही शीर्ष सीमा दिख रही है, भले ही टैबबार झूठा प्रदर्शित करने के लिए सेट हो।

@payneBrandon मैं शीर्ष बार छुपा रहा हूँ
<ion-header *ngIf="isShowHeader()">

मेरा आयन-टैब सबसे नीचे है, इसलिए हेडर को छिपाने से यह ज्यादा प्रभावित नहीं होता है। मैं जिस बारे में बात कर रहा हूं उसका एक स्क्रीनशॉट मैंने संलग्न किया है। कीबोर्ड दिखाया गया है, नीचे के टैब छिपे हुए हैं, लेकिन यह अभी भी प्रतीत होता है कि कुछ शीर्ष बोर्डर लाइन है जो मेरे चारों ओर स्क्रॉल करने पर बनी रहती है।

यह बार फॉर्म के एक हिस्से की तरह दिखता है
क्या आप अपना एचटीएमएल कोड साझा कर सकते हैं?

अंत में इसका पता लगा लिया। मुझे हेडर के बारे में चिंता करने की ज़रूरत नहीं थी क्योंकि मेरे टैब नीचे हैं, लेकिन मुझे पाद लेख (डुह!) को देखने की ज़रूरत है। मैंने इसे छिपाने के लिए पाद लेख पर एक सशर्त वर्ग लागू किया है यदि शरीर में कुंजीपटल-खुला वर्ग और बीएएम, व्यवसाय में वापस है। सहायता के लिए धन्यवाद!

@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;
}

मैंने इसे केवल उस पृष्ठ के लिए किया था जिसे मुझे ठीक करने की आवश्यकता थी।

आईओएस और एंड्रॉइड दोनों में काम करना।

हल किया

सीएसएस चिह्नित को छोड़कर यह एक उचित समाधान है।

```
'@angular/core' से {घटक} आयात करें;
'आयनिक-देशी' से {कीबोर्ड} आयात करें
आयात { होमपेज } '../home/home' से;
'../about/about' से {aboutPage} आयात करें;
'../contact/contact' से {ContactPage} आयात करें;

@अवयव({
टेम्पलेट यूआरएल: 'टैब.एचटीएमएल'
})
निर्यात वर्ग TabsPage {
// यह टैब घटक को बताता है कि कौन से पेज
// प्रत्येक टैब का मूल पृष्ठ होना चाहिए
टैब1रूट: कोई भी = होमपेज;
tab2Root: कोई भी = अबाउटपेज;
tab3Root: कोई भी = संपर्क पृष्ठ;
valueforngif = सच;

कंस्ट्रक्टर (सार्वजनिक कीबोर्ड: कीबोर्ड) { }
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>

अच्छा @ efnan34 , हालांकि आपको इसे कंस्ट्रक्टर में प्रदान करने की आवश्यकता नहीं है।

यह मेरे कीबोर्ड को खोलने पर स्वचालित रूप से बंद होने का कारण बन रहा है ... क्या यह टैब को छिपाने के लिए फोकस पर लौटने के कारण है जो बदले में कीबोर्ड को बंद कर देता है?

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

@ bvx89 आपका समाधान केवल वही है जो मुझे Ionic 2.1.0 के साथ काम करने के लिए मिल सकता है। आयनिक-देशी के लिए एक बग लॉग किया गया है और परिवर्तनों का पता नहीं चल रहा है, इसलिए अन्य कार्य मेरे लिए काम नहीं करते हैं। इसके लिए एक आधिकारिक सुधार की प्रतीक्षा कर रहे हैं

मुझे वही समस्या हो रही है @ किलमोर
क्या इसका अभी तक कोई आधिकारिक समाधान नहीं है?

नमस्ते
उपरोक्त समाधान आयनिक 2.1.0 पर भी चलता है लेकिन एक बेहतर परिणाम [छिपा हुआ] attrb *ngif.Im के स्थान पर उपयोग किया जा सकता है। मैं अपनी परियोजना में इस समाधान का उपयोग कर रहा हूं यह ठीक काम करता है

आपका दिन शुभ हो

ऊपर कुछ Android उपकरणों पर झिलमिलाहट का कारण होगा और वास्तव में एक बुरा विकल्प है।

यह काम करेगा .. इसे आजमाएं

वर मूलहाइट = document.documentElement.clientHeight;
वर ओरिजिनलविड्थ = document.documentElement.clientWidth;
$ (विंडो)। आकार बदलें (फ़ंक्शन() {
// नियंत्रण परिदृश्य / पोर्ट्रेट मोड स्विच
अगर (दस्तावेज़.दस्तावेज़ एलिमेंट.क्लाइंटहाइट == मूलविड्थ &&
document.documentElement.clientWidth == मूल हाइट) {
मूल हाइट = दस्तावेज़.दस्तावेज़ एलिमेंट.क्लाइंटहाइट;
मूलविड्थ = दस्तावेज़। दस्तावेज़ एलिमेंट। क्लाइंटविड्थ;
}
// जांचें कि क्या उपलब्ध ऊंचाई छोटी है (कीबोर्ड दिखाया गया है) इसलिए हम पाद लेख को छिपाते हैं।
अगर (दस्तावेज़.दस्तावेज़ एलिमेंट.क्लाइंटहाइट <मूल हाइट) {
$('.footer').hide();
} अन्यथा {
$('.footer').show();
}
});

इस तरह मैंने इस मुद्दे को हल किया:

tab.ts

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 @manucorp टीम द्वारा एक वास्तविक आधिकारिक समाधान की आवश्यकता है

+1 हमें एक आधिकारिक समाधान की आवश्यकता है, इनमें से कोई भी सुधार उत्पादन के उपयोग के लिए आदर्श नहीं है।

आयनिक का वर्तमान संस्करण इसे अपने आप करता है

21 Nis 2017 17:12 तारीख "रूबेन कैलेवार्ट" नोटिफिकेशन @github.com
यज़्दी:

+1 हमें एक आधिकारिक समाधान की आवश्यकता है, इनमें से कोई भी सुधार इसके लिए आदर्श नहीं है
उत्पादन उपयोग।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/driftyco/ionic/issues/7047#issuecomment-296201358 ,
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/AVskkCpgFZZRbrd56ILc5nIPZICRTclUks5ryLlCgaJpZM4I-H1S
.

क्या वाकई इस बात का ख्याल रखा गया है। मुझे अभी भी टैब बार दिखाई देता है। इस लेखन के रूप में नवीनतम संस्करण चल रहा है आयनिक-कोणीय 3.2.0।

यह 2.xx संस्करण के साथ बहुत अच्छी तरह से काम कर रहा था लेकिन अब मैंने 3.xx संस्करण की जांच की है
कुछ गड़बड़ है। यह स्क्रीन पर आप जो चाहते हैं उसे तब तक छुपाता नहीं है जब तक
कीबोर्ड पर टाइप करना। दुर्भाग्य से हमने अन्य समाधान ढूंढे हैं या डाउनग्रेड किए गए हैं
किसी भी 2.xx . के लिए उर आयनिक संस्करण

12 मई 2017 ऊ 03:32 tarihinde "vazad28" [email protected] Yazdi:

क्या वाकई इस बात का ख्याल रखा गया है। मुझे अभी भी टैब बार दिखाई देता है। नवीनतम चल रहा है
इस लेखन के रूप में संस्करण आयनिक-कोणीय 3.2.0।

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का सीधे उत्तर दें, इसे GitHub पर देखें
https://github.com/driftyco/ionic/issues/7047#issuecomment-300952251 ,
या थ्रेड को म्यूट करें
https://github.com/notifications/unsubscribe-auth/AVskkNkEdzsMkkrhGW0l9OUW2BKly-PSks5r46ingaJpZM4I-H1S
.

यहाँ सिर्फ एक विचार है। उपरोक्त किसी भी हैक का उपयोग करके टैब को छिपाने से उपकरणों पर दृश्य ताज़ा हो जाता है, तो हम कैसे छिपाने के बजाय टैब ज़ोन की ऊंचाई को शून्य पर छोड़ दें? बस एक विचार लेकिन मैं अभी इसे आज़माने के लिए बहुत अधिक शामिल हूँ।

आधिकारिक फिक्स के लिए +1! " डिस्प्ले: कोई नहीं " दृष्टिकोण अस्वीकार्य झिलमिलाहट का कारण बनता है, और टैब एक बार फिर गायब हो जाते हैं ... स्थूल और हैकी दिखते हैं। (किसी के पास कोई विचार है कि झिलमिलाहट से कैसे छुटकारा पाया जाए? अगर यह उपयोगकर्ता को अच्छा लगता है तो मैं हैक से ऊपर नहीं हूं)

इस मुद्दे के बारे में कुछ नया? इससे पहले कि मैं उम्मीद खो दूं और UI की गुणवत्ता को प्रभावित करने वाली किसी चीज़ को लागू करना शुरू कर दूं, मैं अभी भी आधिकारिक सुधार की प्रतीक्षा कर रहा हूं

@patrickmcd , द लॉर्ड ऑफ द थम्स डाउन, बस सोच रहा था कि क्या आपने इस आदत को छोड़ने की कोशिश की है?

@ viking2917 आप मेरे द्वारा सुझाए गए हैक की कोशिश कर सकते हैं और टैब की ऊंचाई को शून्य करने के लिए मजबूर करने का प्रयास कर सकते हैं। यह काम कर सकता है। हालांकि मैंने अभी तक इसकी कोशिश नहीं की है।

दुर्भाग्य से सीएसएस के साथ टैब छुपाने से कई समस्याएं हो सकती हैं। आयोनिक कुछ मूल्यों की गणना करता है जैसे कि ion-content पर मार्जिन और टैब की उपस्थिति को ध्यान में रखता है (जो छिपे हुए हैं)।

हमें समाधान निकालना पड़ा है क्योंकि अन्य घटकों के साथ स्थिति निर्धारण संबंधी कुछ समस्याएं उत्पन्न हुई हैं।

@ खालिद-नोवाफ मैं केवल उन स्पैम टिप्पणियों की सराहना नहीं करता जो आयोनिक टीम से दूर हैं और इस रेपो के ~ 2000 दर्शकों से दूर हैं।

@Floyd1256 की टिप्पणी

मेरे डाउनवोट्स दूसरों को अधिक विचारशील व्यवहार की ओर धकेलने का प्रयास हैं। टिप्पणी करने से पहले, हमें याद रखना चाहिए कि हम ~2000 लोगों के साथ बातचीत कर रहे हैं जिनका समय कीमती है । हमें इस स्थान के साथ उतना सहज व्यवहार नहीं करना चाहिए जितना हम दोस्तों के साथ व्यक्तिगत IM चैट करते हैं। हमें खुद से पूछना चाहिए कि क्या हमारी टिप्पणी दूसरों की मदद करेगी या बाधित करेगी, क्या यह बातचीत को आगे बढ़ाती है या सिर्फ शोर है, क्या यह कहना वास्तव में जरूरी है या जीथब प्रतिक्रिया के साथ बेहतर आवाज उठाई जा सकती है, और क्या यह विकास को गति देगा या धीमा कर देगा।

ऐसा लगता है कि एक शाखा इस मुद्दे को कुछ अन्य लोगों के साथ संबोधित कर रही है https://github.com/ionic-team/ionic/tree/keyboard-fixes
यह प्रतिबद्धता विशेष रूप से बहुत आशाजनक दिखती है

मेरे पास आयनिक v1 से अधिक जाने का साहस नहीं है।

मैं यह पैच बनाता हूं (मैंने प्रभावित दृश्य के नियंत्रक में रखा है, क्योंकि मेरे पास इस कॉम्बो के साथ केवल एक है)।

/* हैक अल मोस्रार एल टेकलाडो एल तब्बार से पोन एनिमा डे एल एन एंड्रॉइड /वर नीचे_संग्रहीत = 0;window.addEventListener('native.keyboardshow', function (e) {angular.element(document.getElementsByClassName('tab-nav')).addClass('hide');bottom_stored = angular.element(document.getElementsByClassName('has-tabs')).css('bottom');angular.element(document.getElementsByClassName('has-tabs')).css('bottom','0px');$ गुंजाइश। $ लागू ();});window.addEventListener('native.keyboardhide', function (e) {angular.element(document.getElementsByClassName('tab-nav')).removeClass('hide');angular.element(document.getElementsByClassName('has-tabs')).css('bottom',bottom_stored);$ गुंजाइश। $ लागू ();});/ हैक */

यह सही है

मेरे मामले में यह केवल तब होता है जब मैं एंड्रॉइड का उपयोग कर रहा हूं, सबसे अच्छा समाधान config.xml में एंड्रॉइड टैग पर एक संपत्ति बदलना है

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

बस सरल निम्नलिखित पंक्तियों को जोड़ें, इसलिए AndroidManifest.xml में Android बिल्ड में

ऊपर बताए गए @Jatapiaro के दृष्टिकोण के लिए, मैंने निम्नलिखित कॉर्डोवा प्लगइन स्थापित किया है:

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 पर काम करना

यहाँ मैंने कीबोर्ड को गतिशील रूप से छिपाने के लिए क्या किया है:

मेरी टीएस फ़ाइल में:

@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;
      });
    });
  }

फिर मेरी एचटीएमएल फाइल में, मैं #footer नामक एक टेम्पलेट वैरिएबल बनाता हूं जिसे मैं उपरोक्त टीएस में संदर्भित कर रहा हूं:

<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>

मुझे आशा है कि यह आपके लिए भी काम करेगा :-) @ RaymondAtivie

मैंने इसे Ionic V3 में इस तरह दिया। बिल्कुल ठीक काम करता है।
टीएस फ़ाइल
ionViewDidEnter () {
अगर (this.keyboard.isOpen ())
यह.शोटैब्स = झूठा;
अन्यथा
this.showTabs = सच;
}

एचटीएमएल फ़ाइल

दासदा

एएसडी

सही उत्तर नहीं

क्या इसके लिए आधिकारिक समाधान पर कोई अपडेट है?

आज तक.. आयोनिक v . के साथ
मुझे काम करने के लिए @ आयनिक-देशी/कीबोर्ड नहीं मिला। जैसा कि कई अन्य लोगों ने कहा है .. onKeyboardShow() घटना कभी भी आग नहीं लगती है।
कॉर्डोवा-कीबोर्ड-प्लगइन को भी हटा दिया गया है।

तो मेरे लिए जो काम किया वह था ...
cordova plugin add cordova-plugin-ionic-keyboard --save
इसे पोस्ट करें .. मैंने window.addEventListener को उनके रीडमी में वर्णित के रूप में जोड़ा है

यदि आप टैब पृष्ठ को छोड़ कर फिर से उस पर वापस आते हैं तो ईवेंट लिस्टनर को हटाना न भूलें।

```` टाइपप्रति
// MyTabs.ts
शो लिस्टनर () {
कंसोल.लॉग ('कीबोर्ड दृश्यमान');
document.body.classList.add('keyboard-is-open');
}
छुपाएं लिस्टनर () {
कंसोल.लॉग ('कीबोर्ड छुपाता है');
document.body.classList.remove('keyboard-is-open');
}

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

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

पहले मेरे लिए काम किया। जब मैं पहली बार इनपुट पर क्लिक करता हूं जब कीबोर्ड दिखाया जाता है तो टैबबार छुपा हुआ था। एक और इनपुट पर क्लिक करने के बाद टैबबार ने फिर से दिखाया है। तो मेरे मामले में जब मैं पहली बार इनपुट फ़ील्ड पर क्लिक करता हूं तो टैबबार केवल छुपाया जाता है।

किसी भी सुझाव? @धरपवज

हे सब लोग, जबकि यह टैब बार को "छिपाने" जैसा नहीं है, इस समाधान ने कीबोर्ड को टैब बार को ऊपर धकेलने के बजाय अस्पष्ट करने की अनुमति देकर मेरे लिए अच्छा काम किया।

अपने मुख्य config.xml में, निम्नलिखित को शामिल करने के लिए एंड्रॉइड प्लेटफॉर्म को संपादित करें:

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

यह आपके ऐप के लिए वैश्विक कीबोर्ड इनपुट व्यवहार को नियंत्रित करने के लिए कॉर्डोवा द्वारा आपके AndroidManifest.xml को लिखे गए डिफ़ॉल्ट मान को संशोधित करता है।

... और यदि आप अपने अगले निर्माण पर AndroidManifest.xml की जांच करते हैं तो आप देखेंगे कि android:windowSoftInputMode= "adjustResize" का डिफ़ॉल्ट "adjustPan" में बदल दिया गया है, इस प्रकार टैब बार को अस्पष्ट होने की अनुमति मिलती है।

@codymbeardsley बहुत बहुत धन्यवाद! यह समाधान मेरे लिए काम करता है; कम से कम एंड्रॉइड के लिए यह एक अच्छा समाधान है। जब कीबोर्ड खुला होता है, तो टूलबार को पाद लेख को छिपा देता है !

बिल्कुल सही काम करता है!
धन्यवाद @codymbeardsley

मुद्दे के लिए धन्यवाद! मूल मुद्दे से प्रासंगिक नहीं होने वाली टिप्पणियों को रोकने के लिए इस मुद्दे को लॉक किया जा रहा है। यदि यह अभी भी Ionic के नवीनतम संस्करण के साथ एक समस्या है, तो कृपया एक नया मुद्दा बनाएं और सुनिश्चित करें कि टेम्पलेट पूरी तरह से भरा हुआ है।