Ionic keyboard hides input in Ionic scrolling on Android device
I have many contributions to ion-scrool. When I focus one input and the SoftKeyBoard comes up. SoftKeyBoard hides input. When I pressed the key, the input scrolled and appeared.
<ion-header>
<ion-navbar>
<ion-title>
Contact
</ion-title>
</ion-navbar>
</ion-header>
<ion-scroll class="root" scrollY="true">
<div>
<div>
<ion-label class="dockLeft ">涉及单位：1</ion-label>
<ion-input type="text" value=""></ion-input>
</div>
<div>
<ion-label class="dockLeft ">涉及单位：2</ion-label>
<ion-input type="text" value=""></ion-input>
</div>
<div>
<ion-label class="dockLeft ">涉及单位：3</ion-label>
<ion-input type="text" value=""></ion-input>
</div>
<div>
<ion-label class="dockLeft ">涉及单位：4</ion-label>
<ion-input type="text" value=""></ion-input>
</div>
<div>
<ion-label class="dockLeft ">涉及单位：5</ion-label>
<ion-input type="text" value=""></ion-input>
</div>
<div>
<ion-label class="dockLeft ">涉及单位：6</ion-label>
<ion-input type="text" value=""></ion-input>
</div>
</div>
</ion-scroll>
my css:
.root{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
0
source to share
1 answer
i create a general directive keyboard-scroll.ts
import {
Directive, ElementRef, HostListener,
Input
} from '@angular/core';
import {Platform } from 'ionic-angular'
@Directive({
selector: '[keyboardScroll]' // Attribute selector
})
export class KeyboardScrollDirective {
@Input('contentDef') contentDef;
@Input('divRef') divRef;
@HostListener('ionFocus') onFocus() {
this.scrollDistance()
}
@HostListener('ionBlur') onBlur() {
this.scrollRecover()
}
constructor(public element: ElementRef,private plt: Platform) {
console.log('Hello KeyboardScrollDirective Directive');
}
scrollDistance() {
//ios works perfect u can do like this
if(this.plt.is('ios'))return;
console.log(this.divRef.nativeElement.offsetTop)
this.contentDef.scrollTo(0,this.divRef.nativeElement.offsetTop)
}
scrollRecover() {
console.log('Blur')
//if u want
this.contentDef.scrollToTop()
}
}
using:
your html:
<ion-grid no-padding>
<div #div></div>
<ion-row>
<ion-col col-2 col-info col-name-4>
<div label-name>客户名称</div>
</ion-col>
<ion-col text-right>
<ion-input text-right label-value placeholder="请填写"
[(ngModel)]="custInfo.khmc"
keyboardScroll [contentDef]="contentDef" [divRef]="divRef"></ion-input>
</ion-col>
</ion-row>
<div row-line></div>
<div #div2></div>
<ion-row>
<ion-col col-2 col-info col-name-5>
<div label-name>地址</div>
</ion-col>
<ion-col text-right>
<ion-input text-right label-value placeholder="请填写"
[(ngModel)]="custInfo.khsh"
keyboardScroll [contentDef]="contentDef" [divRef]="divRef2"></ion-input>
</ion-col>
</ion-row>
<div row-line></div>
</ion-grid>
Your vehicle
export class xxxPage {
@ViewChild('content') contentDef:Content
@ViewChild('div') divRef:ElementRef
@ViewChild('div2') divRef2:ElementRef
-1
source to share