Ionic-framework: 키보드가 열려 있을 때 자동으로 탭 숨기기

예, Android를 사용 중이라고 가정합니다. 오래된 키보드 문제...

@tlancina의 PhoneGap conf에서 키보드에 대한 이야기 를 보았는데 일반적으로 꽤 어려운 문제인 것 같습니다!
안드로이드에서도 제 앱에서 키보드를 열면 하단 탭바가 위로 올라가는 것을 확인할 수 있습니다. 그러나 훨씬 더 나쁜 것은 바닥에 가까운 입력 필드를 덮는 것입니다. Tim은 그것을 피하려고 노력해야 하지만 불행히도 내 프로젝트에서 편집할 긴 목록이 있다고 말했습니다.
나는 전체 키보드 주제를 기다렸다가 그것이 ionic에서 어떻게 작동하는지 보기 위해 연기했습니다.

게다가 @tlancina , ionic에서 키보드 사용에 대한 모범 사례 자습서가

저도 이 문제를 겪고 있습니다.

우리 프로젝트에서도 같은 문제가 있습니다. 이에 대한 계획이 있습니까?

여러분도 고통을 느끼고 있습니다. 혹시 소식이 있나요?

또한 이 훌륭한 기능, 탭 및 숨길 수 있는 좋은 헤더가 필요할 수도 있습니다.

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

CSS 내부:

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

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

한 페이지에 탭이 여러 개인 경우에는 작동하지 않지만 CSS를 사용하여 탭을 직접 선택할 수 있습니다.

현재 Ionic 베타 11을 실행 중입니다.

이것에 대한 어떤 업데이트?

@bvx89 감사합니다.
Rc0 에 있는 사람들을 위해 CSS에 약간의 변경이 있습니다.

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

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

아직 공식적인 해결책은 없지만

Android에서 전체 화면 모드를 활성화하면 이 문제도 해결됩니다.
이것은 설정하여 수행 할 수 있습니다
<preference name="Fullscreen" value="true" />
v5.0.0 이전의 Cordova Android 플랫폼을 사용하는 경우 config.xml에 추가하고 선택적으로 cordova-plugin-fullscreen을 추가합니다.

이것은 수정될 나머지 키보드 문제와 함께 다음 버전에서 수정될 예정입니까(다른 스레드의 키보드 문제에 대해 언급하는 것을 읽으십시오) 또는 이것이 균열 사이에 떨어졌습니까?

@RaymondAtivie
동일한 문제가 있습니다. 다음 버전에서 해결될 예정인가요?

RC3에서는 작동하지 않습니다.
onKeyboardShow()는 실행되지 않습니다...

+1, 같은 문제가 있습니다.

코르도바 CLI: 6.3.1
Ionic CLI 버전: 2.1.8
Ionic 앱 라이브러리 버전: 2.1.4
ios-deploy 버전: 설치되지 않음
ios-sim 버전: 설치되지 않음
운영 체제: 윈도우 8.1
노드 버전: v6.4.0
Xcode 버전: 설치되지 않음

나는 이와 동일한 문제가 있으며 @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';
      }

나는 이것을 시도했고 탭 표시줄이 false를 표시하도록 설정되어 있어도 여전히 동일한 상단 테두리가 표시됩니다.

@payneBrandon 상단 바를 숨기고 있습니다
<ion-header *ngIf="isShowHeader()">

내 이온 탭이 맨 아래에 있으므로 헤더를 숨겨도 큰 영향을 미치지 않습니다. 내가 말하는 내용의 스크린샷을 첨부했습니다. 키보드가 표시되고 하단의 탭이 숨겨져 있지만 스크롤하면 제자리에 유지되는 상단 경계선이 있는 것으로 보입니다.

이 막대는 양식의 일부처럼 보입니다.
html 코드를 공유할 수 있습니까?

마침내 그것을 알아 냈습니다. 내 탭이 맨 아래에 있기 때문에 머리글에 대해 걱정할 필요가 없었지만 바닥글을 볼 필요가 있었습니다. 본문에 keyboard-is-open 클래스와 BAM이 다시 비즈니스에 있는 경우 바닥글을 숨기기 위해 조건부 클래스를 적용했습니다. 도와 주셔서 감사합니다!

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

수정이 필요한 페이지에만 이 작업을 수행했습니다.

iOS와 Android 모두에서 작동합니다.

해결

이것은 표시된 CSS를 제외하고 적절한 솔루션입니다.

```
'@angular/core'에서 { 구성요소 } 가져오기;
'ionic-native'에서 {Keyboard} 가져오기
'../home/home'에서 { 홈페이지 } 가져오기;
'../about/about'에서 { AboutPage } 가져오기;
'../contact/contact'에서 { ContactPage } 가져오기;

@요소({
templateUrl: 'tabs.html'
})
내보내기 클래스 TabsPage {
// 이것은 탭 구성 요소에 어떤 페이지를 알려줍니다.
// 각 탭의 루트 페이지여야 합니다.
tab1Root: 모든 = 홈페이지;
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과 함께 사용할 수 있는 유일한 솔루션입니다. ionic-native에 대해 기록된 버그가 있고 변경 사항이 감지되지 않아 다른 해결 방법이 작동하지 않았습니다. 이에 대한 공식 수정을 기대합니다

나는 같은 문제가 있습니다 @Killmore
이에 대한 공식적인 해결책은 아직 없나요?

안녕하세요
위의 솔루션은 Ionic 2.1.0에서도 실행되지만 *ngif 대신 더 나은 결과 [hidden] attrb를 사용할 수 있습니다. 내 프로젝트에서 이 솔루션을 사용하고 있습니다.

좋은 하루 되세요

위의 경우 일부 Android 장치에서 깜박임이 발생하며 실제로는 잘못된 옵션입니다.

이것은 작동합니다 .. 이것을 시도하십시오

var originalHeight = document.documentElement.clientHeight;
var originalWidth = document.documentElement.clientWidth;
$(창).크기 조정(함수() {
// 가로/세로 모드 전환 제어
if (document.documentElement.clientHeight == originalWidth &&
document.documentElement.clientWidth == originalHeight) {
원본 높이 = 문서.문서요소.클라이언트 높이;
원본폭 = 문서.문서요소.클라이언트폭;
}
// 사용 가능한 높이가 더 작은지(키보드가 표시됨) 확인하여 바닥글을 숨깁니다.
if (document.documentElement.clientHeight < originalHeight) {
$('.바닥글').hide();
} 또 다른 {
$('.바닥글').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 @manucorporat 팀의 실제 공식 솔루션이 필요합니다.

+1 공식 솔루션이 필요합니다. 이러한 수정 사항 중 어느 것도 프로덕션 용도로 이상적이지 않습니다.

현재 버전의 ionic은 자체적으로 수행합니다.

21 Nis 2017 17:12 "Ruben Callewaert" 알림 @github.com
야즈디:

+1 공식 솔루션이 필요합니다. 이러한 수정 사항 중 어느 것도 이상적이지 않습니다.
생산 사용.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/driftyco/ionic/issues/7047#issuecomment-296201358 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AVskkCpgFZZRbrd56ILc5nIPZICRTclUks5ryLlCgaJpZM4I-H1S
.

이게 정말 신경써준건지. 여전히 탭바가 보입니다. 이 작성 ionic-angular 3.2.0에서와 같이 최신 버전을 실행합니다.

2.xx 버전에서는 잘 작동했지만 이제 3.xx 버전을 확인했습니다.
뭔가 잘못되었습니다. 화면에서 원하는 것을 숨길 때까지
키보드로 타이핑 .안타깝게도 다른 솔루션을 찾았습니다.
모든 2.xx에 대한 ur ionic 버전

2017년 5월 12일 ÖÖ 3:32 "vazad28" 알림 @github.com yazdı:

이게 정말 신경써준건지. 여전히 탭바가 보입니다. 최신 실행
ionic-angular 3.2.0을 작성하는 것과 같은 버전입니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/driftyco/ionic/issues/7047#issuecomment-300952251 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AVskkNkEdzsMkkrhGW0l9OUW2BKly-PSks5r46ingaJpZM4I-H1S
.

그냥 여기 생각. 위의 핵을 사용하여 탭을 숨기면 장치에서 보기가 새로 고쳐지므로 숨기는 대신 탭 영역의 높이를 0으로 낮추는 것은 어떻습니까? 그냥 생각이지만 지금은 너무 참여하여 시도합니다.

공식 수정을 위해 +1! " display:none " 접근 방식은 허용할 수 없는 깜박임을 일으키고 탭이 한 번 렌더링된 다음 사라집니다.... 거추장스럽고 해키해 보입니다. (누군가 깜박임을 제거하는 방법에 대한 아이디어가 있습니까? 사용자에게 좋게 보이면 해킹 위에 있지 않습니다)

이 문제와 관련하여 새로운 것이 있습니까? 희망을 잃고 UI의 품질에 영향을 미칠 무언가를 구현하기 시작하기 전에 여전히 공식 수정을 기다리고 있습니다.

@patrickmcd , 엄지손가락의 제왕, 이 습관을

@viking2917 내가 제안한 해킹을 시도하고 탭 높이를 0으로 강제

불행히도 CSS로 탭을 숨기면 많은 문제가 발생합니다. Ionic은 ion-content 여백과 같은 몇 가지 값을 계산하고 숨겨진 탭의 존재를 고려합니다.

다른 구성 요소와 함께 일부 위치 문제가 발생했기 때문에 솔루션을 제거해야 했습니다.

@Khalid-Nowaf 나는 Ionic 팀과 이 리포지토리의 ~2000명의 관찰자들로부터 시간을 빼앗는 스팸 댓글에 감사하지 않습니다.

@Floyd1256 님 의 댓글은 사려깊지 않은 스팸입니다. 그것은 대화에 아무것도 추가하지 않습니다. 그것은 단지 우리의 받은 편지함을 채우는 역할을 하는 또 다른 "플러스 원 / 우리가 아직 거기에 있습니까?" 코멘트입니다.

내 downvotes는 더 사려 깊은 행동으로 다른 사람들을 넛지하려는 시도입니다. 댓글을 달기 전에 우리는 _시간이 소중한_ ~2000명의 사람들과 대화를 나누고 있음을 기억해야 합니다. 우리는 이 공간을 친구와 개인적인 IM 채팅처럼 경솔하게 취급해서는 안 됩니다. 우리는 우리의 의견이 다른 사람들에게 도움이 될 것인지 방해가 될 것인지, 대화를 진전시키거나 그저 떠들썩한 것인지, 정말로 말할 필요가 있는지 또는 Github 반응으로 더 잘

https://github.com/ionic-team/ionic/tree/keyboard-fixes 와 함께 이 문제를 해결하는 분기가 있는 것 같습니다.
이 커밋 은 특히 ​​매우 유망해 보입니다.

ionic v1 이상 갈 용기가 없습니다.

이 패치를 만듭니다(나는 이 콤보가 있는 컨트롤러가 하나만 있기 때문에 영향을 받는 뷰의 컨트롤러를 넣었습니다).

/* HACK Al Mostrar el teclado el tabbar se pone encima de el en android /var bottom_stored=0;window.addEventListener('native.keyboardshow', 함수(e) {angular.element(document.getElementsByClassName('tab-nav')).addClass('숨기기');bottom_stored = angular.element(document.getElementsByClassName('has-tabs')).css('바닥');angular.element(document.getElementsByClassName('has-tabs')).css('바닥','0px');$scope.$apply();});window.addEventListener('native.keyboardhide', 함수(e) {angular.element(document.getElementsByClassName('tab-nav')).removeClass('숨기기');angular.element(document.getElementsByClassName('has-tabs')).css('bottom',bottom_stored);$scope.$apply();});/ 해킹 */

이것은 작동합니다

제 경우에는 Android를 사용할 때만 발생합니다. 가장 좋은 해결책은 config.xml에서 android 태그의 속성을 변경하는 것입니다.

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

다음 줄을 간단히 추가하면 AndroidManifest.xml의 Android 빌드가 android:windowSoftInputMode에 adjustPan 이 있으므로 키보드가 화면을 위로 밀어 올리는 대신 모든 콘텐츠를 오버레이하게 됩니다.

위에서 설명한 @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에서 작업

다음은 키보드를 동적으로 숨기기 위해 수행한 작업입니다.

내 TS 파일에서:

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

그런 다음 내 HTML 파일에서 위의 TS에서 다음과 같이 참조하는 #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에서 이렇게 주었습니다. 완벽하게 잘 작동합니다.
TS 파일
ionViewDidEnter() {
if (this.keyboard.isOpen())
this.showTabs = 거짓;
또 다른
this.showTabs = 사실;
}

HTML 파일

다스다

asd

정답이 아니다

이에 대한 공식 솔루션에 대한 업데이트가 있습니까?

오늘부터.. Ionic v로
@ionic-native/keyboard가 작동하도록 할 수 없습니다. 다른 많은 사람들이 말했듯이 .. onKeyboardShow() 이벤트는 절대로 발생하지 않습니다.
또한 cordova-keyboard-plugin도 더 이상 사용되지 않습니다.

그래서 나를 위해 일한 것은 ...
cordova plugin add cordova-plugin-ionic-keyboard --save
이것을 게시하십시오 .. readme에 설명 된대로 window.addEventListener를

탭 페이지를 떠났다가 다시 돌아올 경우를 대비하여 이벤트 리스너를 제거하는 것을 잊지 마십시오.

````타이프스크립트
// MyTabs.ts
쇼 리스너() {
console.log('키보드 표시');
document.body.classList.add('키보드가 열려 있음');
}
숨김 리스너() {
console.log('키보드 숨김');
document.body.classList.remove('키보드가 열려 있음');
}

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

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

처음에는 나를 위해 일했습니다. 키보드가 표시될 때 입력을 처음 클릭하면 탭 표시줄이 숨겨져 있습니다. 다른 입력을 클릭하면 탭 표시줄이 다시 표시됩니다. 따라서 제 경우에는 처음에 입력 필드를 클릭할 때만 탭 표시줄이 숨겨졌습니다.

어떠한 제안? @dharapvj

안녕하세요 여러분, 탭 표시줄을 "숨기기"와 같지는 않지만 이 솔루션은 키보드가 탭 표시줄을 누르는 대신 탭 표시줄을 가릴 수 있게 하여 저에게 효과적이었습니다.

기본 config.xml에서 다음을 포함하도록 Android 플랫폼을 편집합니다.

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

이것이 하는 일은 Cordova가 AndroidManifest.xml에 쓰는 기본값을 수정하여 앱의 전역 키보드 입력 동작을 제어하는 ​​것입니다.

...그리고 다음 빌드에서 AndroidManifest.xml을 확인하면 android:windowSoftInputMode= "

@codymbeardsley 정말 감사합니다! 이 솔루션은 저에게 효과적입니다. 적어도 안드로이드의 경우 좋은 솔루션입니다. 키보드가 열려 있을 때 도구 모음 을 바닥글을 숨깁니다 !

완벽하게 작동합니다!
@codymbeardsley 감사합니다

문제를 주셔서 감사합니다! 이 문제는 원래 문제와 관련이 없는 댓글을 방지하기 위해 잠겨 있습니다. 이것이 여전히 최신 버전의 Ionic에서 문제가 되는 경우 새 문제를 만들고 템플릿이 완전히 채워졌는지 확인하십시오.