कीबोर्ड दिखाता है जब कीबोर्ड

Question

मैं आयनिक 2 के नवीनतम संस्करण का उपयोग कर रहा हूं। मेरे कोड में <ion-content padding><form></form></ion-content> है जिसमें इसके अंदर एक टेक्स्ट इनपुट है। जब मैं एंड्रॉइड पर कुछ टाइप करने का प्रयास करता हूं तो पूरे पृष्ठ को कीबोर्ड द्वारा ऊपर की तरफ धकेल दिया जाता है।

html फ़ाइल

<ion-content class="login-screen" padding> 
    <form (ngSubmit)="login()" novalidate> 
    <ion-list> 
     <ion-item> 
     <ion-label fixed>Username</ion-label> 
     <ion-input type="text" name="username" [(ngModel)]="username" required></ion-input> 
     </ion-item> 
     <ion-item> 
     <ion-label fixed>Password</ion-label> 
     <ion-input type="password" name="password" [(ngModel)]="password" required></ion-input> 
     </ion-item> 
    </ion-list> 
    <button ion-button full type="submit">Login</button> 
    </form> 
    <button ion-button clear full outline type="button" (click)="openModal()">Forgot Password?</button> 
</ion-content> 

किसी भी समाधान है?

Answer 1

स्क्रॉलिंग के साथ इनपुट और फॉर्म के लिए कुछ समस्याएं हैं जैसे कि here का उल्लेख किया गया है, इसलिए मैं इसे ठीक करने के लिए अगले आरसी की प्रतीक्षा करने की अनुशंसा करता हूं, क्योंकि यह आपकी कोड गलती सिर्फ आयनिक बग नहीं है।

Answer 2

यह सब आरसी 4 (जल्द ही) में तय किया जाना चाहिए। इसका अर्थ है कि, स्क्रॉल निष्क्रिय करने के लिए जब इनपुट केंद्रित है अपने config वस्तु (@NgModule में) से जोड़ें: उन दो संपत्तियों की

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

एक बहुत अच्छी व्याख्या here पाया जा सकता है:

Ionic2 डिफ़ॉल्ट के तहत, में अतिरिक्त विशेषताएं हैं जो अपनी सामग्री के नीचे पैडिंग ('scrollAssist') जोड़कर और को स्क्रॉल करके व्यूपोर्ट के भीतर केंद्रित इनपुट तत्व रखने के लिए कुंजीपटल स्लाइडियोवर की क्षतिपूर्ति करने का प्रयास कर रही है। इसे वापस ('ऑटोफोकसएसिस्ट')। ScrollAssist और autoFocusAssist दोनों अच्छी तरह से कॉन्फ़िगरेशन में लागू स्विच हैं जो अभी तक सार्वजनिक दस्तावेज प्राप्त नहीं हुए हैं।

तुम भी ionic-plugin-keyboard उपयोग कर सकते हैं धक्का/स्क्रॉल सामग्री को फलक और कीबोर्ड पर स्लाइड और मौजूदा सामग्री को कवर करने की अनुमति से स्थानीय ब्राउज़र को रोकने के लिए:

this.platform.ready().then(() => { 
    StatusBar.styleDefault(); 
    Splashscreen.hide(); 

    Keyboard.disableScroll(false); // <- like this 

    // ... 

अद्यतन

टिप्पणियों में उल्लिखित @Luckylooke की तरह:

Keyboard.disableScroll(), iOS और Windows समर्थित

अद्यतन द्वितीय

आयोनिक 3.5.x के रूप में की तरह कीबोर्ड अभी भी कुछ मुद्दे हैं लगता है। मैंने पाया कि निम्न कॉन्फ़िगरेशन बेहतर परिणाम (चूक की तुलना में) पैदा करता है देखने के यूआई/UX बिंदु से:

@NgModule({ 
    declarations: [ 
     MyApp, 
     //... 
    ], 
    imports: [ 
     //... 
     IonicModule.forRoot(MyApp, { 
      scrollPadding: false, 
      scrollAssist: true, 
      autoFocusAssist: false 
     }) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
     // ... 
    ], 
    providers: [ 
     // ... 
    ] 
}) 
export class AppModule { } 

scrollAssist: true रखने से हम इनपुट कीबोर्ड से छिपाना चाहता है से बचने के अगर यह पास है पृष्ठ के निचले हिस्से में, और scrollPadding: false सेट करके हम कुंजीपटल छिपाने के बाद खाली खाली स्थान से संबंधित कुछ अजीब बग से भी बचते हैं।

Answer 3

इस विधि को जोड़ें।इस पृष्ठ पर ts

ionViewWillEnter() { 
    this.content.resize(); 
} 

मेरे परिदृश्य है: कुंजीपटल इस पेज पर कहा जाता है, लेकिन जब आप पिछले पृष्ठ पर वापस, पेज एक पूरे के रूप में दिखाई देगा, और मैं इस विधि के साथ इसे हल करने की कोशिश करते हैं, मैं आयनिक 2 का उपयोग करता हूं।