Bàn phím ionic 2 đẩy tiêu đề ra khỏi màn hình trên ios

Question

Tôi có giao diện trò chuyện đơn giản nhưng khi tôi lấy nét văn bản đầu vào, bàn phím đẩy mọi thứ lên, bao gồm cả tiêu đề. Ngoài ra nội dung trên cùng của khu vực nội dung bị ẩn và tôi không thể cuộn lên đến chúng.

Đây chỉ dành cho ios.

<ion-header></ion-header> 
<ion-content> 
    Chat Title... 
    Chat Messages... 
</ion-content> 
<ion-footer> 
    <ion-card class="chat-input"> 
     <textarea appAutoresize class="chat-input-textarea" rows="1" [(ngModel)]="input" placeholder="Ihre Nachricht"></textarea> 
    </ion-card> 
</ion-footer> 

Answer 1

Hãy xem video này. https://www.youtube.com/watch?v=9J8AxhDxtTE&t=22s iirc bạn có thể xem các quy tắc CSS áp dụng cho la Chrome với ionic serve --lab Có thể bạn có thể điều tra/đăng CSS để bổ sung câu hỏi của mình. Liên quan đến việc sau khi iPhone được kết nối qua cáp USB để Macbook Pro, vv @ khoảng 3-4 phút trong .. với Safari phát triển đơn

Cũng có một số ghi chú here có thể áp dụng:

cordova.plugins.Keyboard.disableScroll(true); 

Ngăn chặn các mẹ đẻ UIScrollView từ di chuyển khi một đầu vào được tập trung. Dấu hiệu cho thấy điều này đang xảy ra ở đầu ứng dụng của bạn cuộn ra khỏi chế độ xem (nếu sử dụng Ionic, thanh tiêu đề của bạn sẽ biến mất).

Điều này không ngăn cản bất kỳ phần tử DOM nào có thể cuộn. Điều đó cần phải xảy ra từ CSS và JavaScript, không phải plugin này.

Answer 2

sau khi nghiên cứu dài và đọc rằng vấn đề này vẫn còn mở trong cordova/ionic, tôi quyết định tự giải quyết vấn đề. Ý tưởng là để điều chỉnh chiều cao của tiêu đề theo chương trình tùy thuộc vào chiều cao của bàn phím.

1. Trên tiêu đề của xem mẫu (HTML) đính kèm một chỉ thị phong cách:

<ion-header [ngStyle]="getKeyboardStyle()" > 

2.- Về thành phần (TS) Tôi kích hoạt các sự kiện của bàn phím (show, hide) và giá trị độ cao:

Observable.merge(this.nativeKeyboard.onKeyboardShow(), this.keyboard.didShow) 
    .subscribe((e: any) => { 
     this.keyboardHeight = e.keyboardHeight; 
    }); 

Observable.merge(this.nativeKeyboard.onKeyboardHide(), this.keyboard.didHide) 
    .subscribe((e: any) => { 
     this.keyboardHeight = e.keyboardHeight | 0; 
    }); 
} 

Trường hợp this.keyboardHeight là loại số biến toàn cầu. Và this.keybaord và this.nativeKeyboard là các plugin cordova.

3. Cuối cùng, đây là phương pháp trả lại chiều cao gắn liền với các chỉ thị ngStyle của tiêu đề:

getKeyboardStyle() { 
    let style = { 
    'top': this.keyboardHeight ? this.keyboardHeight + 'px' : '0px' 
    } 
    return style; 

Tôi hy vọng rằng điều này có thể giúp đỡ.