Ionic-framework: issue(forms): 양식에 대한 입력, 스크롤, 키보드 문제

@dylanvdmerwe 훌륭합니다. 함께 만들어 주셔서 감사합니다! 다음 및 이전 버튼을 사용하여 입력을 위아래로 탭하는 것과 관련하여 이것은 작동해야 하지만 최근에 문제가 발생한 것일 수 있습니다.

또한 자동 완성 및 자동 수정을 위해 이동하며 요소에 특별히 추가되지 않는 한 기본적으로 비활성화됩니다. https://github.com/driftyco/ionic/blob/2.0/ionic/components/input/input-base.ts #L217

자동 대문자 사용도 기본적으로 비활성화되어야 한다고 생각하십니까?

@adamdbradley

• iOS에서 다양한 입력 사이를 이동할 수 있는 키보드 버튼을 얻을 수 없습니다. 그들은 "혼란스러워"하고 키보드는 결국 닫힙니다. 이 버튼이 있는 다른 키보드로 테스트할 때 여전히 Android에서 테스트해야 합니다.
• 자동 완성 및 자동 수정의 기본값에 가장 적합한 것이 무엇인지 확실하지 않습니다. iOS에서는 특정 키보드 유형에 대해 기본적으로 활성화되어 있지만 표준 <input> 규칙을 따르는 것이 가장 좋습니다.
• 나중에 자동 완성 및 자동 대문자 사용에 대한 몇 가지 순열을 테스트할 것입니다. 참고 키보드 플러그인이 변경되면 여기에 별도로 기록했습니다.

실제 장치에서 테스트하고 있습니다.

@adamdbradley 위의 항목을 업데이트했습니다. 눈에 띄는 것은 확실히 재현 가능한 문제입니다.

Android 문제 #1에서 우리는 어디에 있습니까? 그것 없이는 내 앱을 완전히 엉망으로 만들고 있습니다.

Android 문제 #1에 대한 +1 :)

이 호에 나열된 항목에 어떤 움직임이 있습니까?

@dylanvdmerwe 다음 베타가 릴리스(beta8)되면 이와 같은 문제를 해결하는 데 집중할 것입니다. 불편을 드려 죄송합니다

Android 문제 #1에 대한 +1 :)

Android 문제에 대한 +1:

. 입력을 선택할 때 전체 양식 내용을 스크롤해야 키보드가 표시된 후 선택한 항목이 표시됩니다.

이것은 ionic1 에서 ionic 2 로 완전히 이식하는 것을 방해합니다.
모두 제일 좋다!

이것은 ionic1 에서 ionic 2 로 완전히 이식하는 것을 방해합니다.

여기도 마찬가지입니다.

Android 문제 #1에 대한 +1
이 문제를 조속히 수정해주세요! 우리는 이에 대해 새로운 앱을 시작했지만 이 버그가 거래 차단기가 되어 ionic 1으로 돌아가기를 원하지 않습니다!

@adamdbradley , @jgw96 현재 해결 방법이 있습니까?

업데이트를 주시겠습니까? 이 기본 기능이 작동하지 않아 데모하기 어렵습니다...
감사 해요!

이에 대한 업데이트도 감사하겠습니다. ion-input 요소는 초점을 맞출 때 스크롤되어 보이지 않습니다. 정상적인 input 요소로 전환하려고 시도했지만 모든 종류의 다른 문제가 발생합니다. 감사 해요!

모두들 안녕! 나는 우리가 이와 같은 문제에 대해 열심히 노력하고 있음을 확신할 수 있습니다. ios나 android에서 주로 이 문제를 보고 계신가요? 아니면 둘 다에서 발생합니까?

안드로이드에서 발생하며 ios는 확실하지 않습니다. 지금은 입력을 시작하면 UI가 위로 스크롤되어 입력이 표시됩니다. 이상적으로는 초점이 맞춰지고 키보드가 팝업되는 즉시 발생해야 합니다.

안녕하세요,

기기의 iOS에서 몇 가지 더 많은 문제가 표시됩니다(Android에서는 확인하지 않음).

• 부동 레이블을 사용하면 입력을 클릭할 때 값 앞에 일시적으로 빈 줄이 표시되는 경우가 많아 값이 아래로 이동하고 입력이 세로로 확장됩니다. 일반 레이블을 사용하면 값이 일시적으로 수평으로 옮겨지는 경우가 있습니다.
• 부동 레이블을 사용하면 스크롤할 때 캐럿이 입력 밖으로 이동합니다.
• 코르도바 키보드 플러그인을 사용하고 액세서리 막대를 사용하여 필드 사이를 탐색할 때 전체 보기가 때때로 점프합니다. disableScroll(true)을 설정한 후 다음 버튼은 제대로 작동하지만 뒤로 버튼은 여전히 ​​화면을 점프하게 합니다. 대신 여기에 보고해야 하는지 확실하지 않습니까?

Ionic에서 좋은 작업을 해주셔서 감사합니다. 문제가 해결되기를 기대합니다!

Android의 키보드 및 이온 입력과 동일한 문제입니다. 양식이 있는 모든 앱에서 매우 중요한 문제입니다!

이 중요한 문제에 대한 업데이트가 없습니까?

이 문제에 대한 업데이트가 있습니까?

앞으로의 RC에서 이 부분을 살펴보고 싶습니다.

이에 대한 업데이트. iOS용 #5 재현할 수 없습니다. 마스터에서 잘 작동합니다. 누군가 확인할 수 있습니까?

지금 #1을보고 있습니다.

나는 같은 문제에 직면하고 있습니다. 같은 업데이트가 있습니까? .

iOS #1은 큰 화면(iPad)에서 잘 작동하지 않습니다. 입력은 맨 위로 스크롤되지만 키보드에 더 가까이 있으면 깔끔합니다.

안녕하세요,

우리 측의 여러 장치에서 문제가 발생했기 때문에 문제를 조사하는 데 시간이 걸렸습니다.

기계적 인조 인간:

• scrollAssist를 활성화하면 괜찮아 보입니다.
• 키보드가 이미 열려 있을 때 하나의 이온 입력에서 다른 이온 입력으로 전환할 때 여전히 몇 가지 버그가 있습니다(페이지가 많이 스크롤됨).

iOS:

• 처음에는 페이지가 스크롤되지 않습니다
• 두 번째로 페이지 입력 시 페이지가 정확하게 위로 스크롤됩니다.
• Android와 동일하게 필드 간 전환 시 페이지 스크롤이 너무 많습니다.

몇 가지 검색 후 scroolView.scrollTo가 scrollTop HTML 속성을 사용한다는 것을 알았습니다.
이 속성은 이론적인 값인 scrollHeight - clientHeight에 의해 제한됩니다.

scroll-view.js(node_modules/ionic-angular/util/)에 다음 줄을 추가했습니다.
console.log(fromY + ' =>' + y);
console.log('최대 이론값: ' + (this._el.scrollHeight - this._el.clientHeight));
그리고 문제는 분명한 것 같습니다.

어떤 이유로 Android에서 필드에 초점을 맞추면 위로 스크롤하기 전에 키보드가 생성되므로 최대 이론값이 위로 스크롤하려는 값보다 우수합니다. iOS에서는 처음에는 그렇지 않습니다. 따라서 최대 스크롤 업 값은 1입니다.

네 차례 야 ;)

@EDumdum 이 문제를 어떻게 복제합니까? 입력에 포커스가 있고 키보드가 이미 켜져 있고 다음 입력으로 전환하면 다음 입력이 헤더 아래로 스크롤됩니다. 당신을 위해 그렇게하지 않습니까?

키보드가 이미 열려 있을 때 하나의 이온 입력에서 다른 이온 입력으로 전환할 때 여전히 몇 가지 버그가 있습니다(페이지가 많이 스크롤됨).

안녕하세요 @adamdbradley

아래 예제를 만드는 단계입니다. 스크린샷은 에뮬레이터에서 가져온 것이지만 장치에서 동일한 동작을 재현합니다. 양식은 색상을 추가하기 위한 것입니다(파란색 = 초점이 맞춰진 필드, 빨간색 = 기타 필드).

재현 단계

• 초점 필드 2
  https://drive.google.com/open?id=0B6y5VVmSy-NVZ2xZdjFORzctZFE
  모든 것이 OK입니다 :)
• 초점 필드 1
  https://drive.google.com/open?id=0B6y5VVmSy-NVT0ZpUmd6RllPeHM
  위로 스크롤하는 대신 아래로 스크롤해야 합니다. :(
• 초점 필드 2
  https://drive.google.com/open?id=0B6y5VVmSy-NVcExibnA5bUJTWUk
  제길...

예제를 만드는 단계

• 새 프로젝트 생성(ionic start -v2 myApp) => RC2
• 내 앱 생성자에 scrollAssist를 추가했습니다.
  constructor(config: Config, platform: Platform) { config.set('scrollAssist', true); ... }
• 내 home.html 및 home.ts 수정 및 .scss에 약간 추가

<ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div class='takePlace'>Bla bla</div> <form novalidate [formGroup]="form"> <ion-item> <ion-input type="tel" pattern="[0-9]{3}" formControlName="dummyField"></ion-input> </ion-item> <ion-item> <ion-input formControlName="dummyField2"></ion-input> </ion-item> </form> </ion-content>

import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public form: FormGroup; constructor(private formBuilder: FormBuilder) { this.form = this.formBuilder.group({ dummyField: ['', [Validators.required, Validators.pattern('[0-9]{3}')]], dummyField2: ['', [Validators.required, Validators.pattern('[0-9]{3}')]] }); } ngOnInit() { } }

.takePlace { height: 300px; border: 1px solid red; }

nightly build는 입력 필드를 올바르게 이동하지만 뒤로 버튼을 누르고 키보드가 아래로 미끄러질 때 일부 위치에서는 입력이 원래 위치에 있어야 했던 위치(위로 슬라이드)를 유지합니다.
둘째, 에뮬레이터에 입력할 수 없습니다. 화면 키보드에 입력해야 하고 emu가 이를 표시하지 않기 때문입니다.

@kodeine

피드백 주셔서 감사합니다! 다양한 테스트 시나리오에 이 모든 메모를 사용하겠습니다. 모두가 그것을 테스트할 수 있도록 나는 곧 밤마다 밖으로 나가려고 노력할 것입니다, 감사합니다!

@adamdbradley
또 다른 시나리오는 입력이 있고 키보드가 열려 있는 페이지에 있었고 뒤로 버튼을 클릭하고 탭이 키보드 상단에도 있다는 것을 알았습니다. 따라서 키보드 뒤에 탭을 유지해야 할 수도 있습니다.

관련: https://github.com/driftyco/ionic/commit/c4cf9df387da3524d80660fb69037de77553feea

야간에 더 잘 작동합니다!

하지만 최근 변경 사항으로 인해 도입된 버그를 발견했습니다. 입력 A에 포커스가 있고 입력 B를 탭하면 키보드가 숨겨지고 어떤 입력에도 포커스가 없습니다.

또한 입력에 초점을 맞출 때 예를 들어 Safari에서 입력에 초점을 맞출 때와 같은 부드러운 스크롤 애니메이션 대신 해당 위치로 "점프"합니다.

편집: 이것은 WKWebView를 사용하고 있습니다. UIWebView를 테스트하지 않았습니다.

입력을 위한 "다음" 버튼이 지원되는지 여부에 정말 관심이 있습니다.
사용자(안드로이드, ios는 확실하지 않음)가 양식 작업을 완료하는 대신 다음 입력으로 이동한다고 생각하여 제출/확인 버튼을 누르지 않는 것은 다소 어렵습니다.

@biesbjerg 이러한 문제를 재현하는 방법을 자세히 설명할 수 있습니까? 위치로 점프한다고 말하면 헤더가 스크롤되어 사라지나요? 어떤 유형의 입력입니까? 입력이 앱 상단에 있습니까, 아니면 하단에 가깝습니까? 문제의 비디오를 제공할 수 있습니까? 감사 해요

@adamdbradley 이 비디오는 "부드러운 스크롤 대신 위치로 이동"을 보여주고 입력에 초점을 맞추고 뒤로 하드웨어 버튼을 누르면 콘텐츠를 뒤로 스크롤하지 않는 버그도 보여줍니다.
편집: gif 크기가 변경되었습니다.

@adamdbradley 탭된 입력에 초점을 맞추지 않고 키보드가 사라지는 입력 초점 문제입니다.

그리고 이것은 Android에 있습니다. 포커스가 있을 때 내 양식이 갑자기 점프하고 첫 번째 포커스가 있는 입력이 화면에 표시되지 않습니다.

안녕하세요 @biesbjerg 입니다 ! 입력 스크롤링에 대한 수정 사항이 포함된 또 다른 야간 프로그램을 최근에 발표했습니다. 시도해 보시겠습니까? 감사 해요!

@jgw96 안녕하세요! 2.0.0-rc.3-201611302233을 테스트했지만 아무 것도 변경되지 않았으므로 gif 녹음은 여전히 ​​유효한 문제입니다.

@biesbjerg 를 테스트

@jgw96 여기 있습니다! https://github.com/biesbjerg/6228-ionic-keyboard-issues

단계:

1. git clone https://github.com/biesbjerg/6228-ionic-keyboard-issues.git
2. cd 6228-ionic-keyboard-issues
3. npm install
4. mkdir www ( www 가 존재해야 하는 코르도바/이오닉 버그 때문에 필요하거나 플러그인 설치가 실패함)
5. ionic state reset
6. 기기에서 실행

iOS 비디오에 표시된 문제는 UIWebView와 WKWebView의 문제입니다.

Android 문제는 내 콘텐츠가 flexbox를 사용하여 세로로 가운데에 배치되는 것과 관련이 있지만 그래도 정상적으로 작동 해야 합니다.

안녕하세요 @biesbjerg 입니다 ! 리포지토리에 감사드립니다. 이 문제를 해결할 수 있는 몇 가지 추가 변경 사항이 오늘 스크롤에 있습니다. 테스트 후 발견한 내용으로 이 게시물을 업데이트하겠습니다.

안녕하세요 @jgw96입니다! 멋있는! :-)

Touching an area that is not an input dismisses the keyboard.

이 부분(음, 다른 부분) 옆에 체크 표시가 있습니다. 이것이 다음 릴리스에 있다는 것을 의미합니까? 이것은 키보드 상단의 <ion-footer> 에 보내기 버튼이 있는 채팅 응용 프로그램에 적합합니다! 그런 다음 보내기 버튼을 클릭한 후 키보드가 항상 닫히지 않습니다.

안녕하세요 여러분. 나도 같은 문제가 있습니다. 그리고 나는 무언가를 관찰합니다.
입력이 선택되지 않은 경우 이 경우가 있습니다.

그러나 우리가 그것을 선택할 때, 우리는 이것을 가지고 있습니다

결과적으로 나는 !important로 그 나쁜 단계를 밟았습니다.

그리고 그것은 나를 위해 임시 솔루션으로 작동합니다.

그래서.. position:relative 를 사용하는 무언가가 있을 때 상황이 정말 엉망이 됩니다

이 예에서 로고는 상대 위치의 요소이며 첫 번째 입력을 누르면 다음과 같이 됩니다.

그러나 두 번째 입력을 누르면 로고도 푸시됩니다.

@jgw96 이 문제와

저 역시 이 문제에 대한 소식이 있기를 진심으로 바라고 있습니다. 제 고객은 많은 압박을 받고 있습니다 🙉

좋은 소식은 입력이 최신 nightlies에서 훨씬 더 잘 작동한다는 것입니다. 이 문제의 원래 로거인 저를 포함하여 많은 사람들이 수정 사항에 만족할 것이라고 생각합니다.

@yannbf , 공정하게

나는 그것을 이해하고 그것이 정말로 합리적이라고 생각합니다. 나는 단지 그것을 전달하기 위해 업데이트가 있기를 바랐다. 저는 ionic 팀이 한 일에 대해 매우 감사합니다.

어쨌든, 어떻게 그 nightly로 현재 앱을 테스트할 수 있습니까?

@yannbf npm install ionic-angular<strong i="6">@nightly</strong> --save
package.json을 angular 2.2.1로 업데이트하는 것을 잊지 마십시오.

야간에 훨씬 더 잘 작동합니다! 고마워 얘들아

모두들 안녕! Ionic을 사용해 주셔서 감사합니다! @biesbjerg 및 @yannbf은 너희들로 업데이트 줄래 RC4 및하시기 바랍니다 테스트? 해당 릴리스에는 입력 스크롤링 수정 사항이 많이 포함되어 있어 문제를 해결할 수 있기를 바랍니다. 감사 해요!

@jgw96 네, 이미 했습니다. 훨씬 낫습니다! 최종 발매가 걱정된다 😄

@jgw96 업데이트 후 상황이 position:absolute 또는 position:fixed 가 있는 요소는 여전히 영향을 받습니다. 이전에 인쇄를 보낸 로고가 있는 페이지에서 이동할 수 있었지만(다른 접근 방식으로 절대 위치 제거) 다음 페이지에서와 같이 페이지 하단에 "계약 조건"이 있어야 하므로 여전히 문제에 직면하고 있습니다. :

코드는 다음과 같습니다.

<div class="agreement-text">
    <p>paragraph's content..</p>
</div>

그리고 CSS:

.agreement-text {
    position: fixed;
    padding: 10px;
    margin-top: 40px;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    a {
      color: rgb(250, 231, 124);
    }
}

제 경우에는 RC5로 업데이트한 후에도 Android에서 점프 입력 문제가 남아 있습니다. 방금 빈 템플릿으로 새 프로젝트를 시작했고 문서의 이온 입력 구성 요소를 아래 동작인 이온 함량으로 복사했습니다.

보시다시피 첫 번째 구성 요소를 제외한 모든 구성 요소가 점프합니다.
레코드의 경우 ionic info 명령의 출력입니다.

코르도바 CLI: 6.4.0
Ionic 프레임워크 버전: 2.0.0-rc.5
Ionic CLI 버전: 2.2.1
Ionic 앱 라이브러리 버전: 2.2.0
Ionic 앱 스크립트 버전: 1.0.0
ios-deploy 버전: 설치되지 않음
ios-sim 버전: 설치되지 않음
운영 체제: 윈도우 10
노드 버전: v6.9.2
Xcode 버전: 설치되지 않음

@almr193 그 동작이 정확해 보입니다. 키보드가 모바일 장치에서 표시될 때 화면이 스크롤됩니다. 스크롤하면 강조 표시된 입력이 항상 표시되고 화면 키보드에 가려지지 않습니다.

@dylanvdmerwe 빠른 답변에 감사드립니다. 제가 제시한 시나리오가 정확해 보이며 키보드가 화면에 표시될 때 화면이 스크롤된다는 점을 이해합니다. 그러나 항목 재정렬이 활성화된 ion-list 내 ion-input 가 있는 또 다른 이상한 시나리오가 있습니다. 입력이 범위를 벗어나 사용자가 무엇을 쓰고 있는지 볼 수 없습니다.

@almr193 예, 불행히도 이것은 여전히 ​​해결되지 않은 문제입니다.
위의 초기 게시물의 Android 항목 1)과 4)를 참조하십시오.

+1 아직 해결되지 않았습니다. ionic-native에서 Keyboard의 모든 방법은 Android에서 도움이되지 않는 것 같습니다.

슬라이드 + 입력을 사용하는 데 문제가 있습니다. 스크롤을 수행하지 않음으로써 매우 이상한 동작을 보여줍니다.

+1

코르도바 CLI: 6.4.0
Ionic 프레임워크 버전: 2.0.0
Ionic CLI 버전: 2.1.18
Ionic 앱 라이브러리 버전: 2.1.9
Ionic 앱 스크립트 버전: 1.0.0
ios-deploy 버전: 설치되지 않음
ios-sim 버전: 5.0.13
OS: macOS 시에라
노드 버전: v6.9.4
Xcode 버전: Xcode 8.2.1 빌드 버전 8C1002

+1

이것은 여전히 ​​최신의 가장 큰 코르도바 및 이온의 문제입니다.

해결책이나 해결 방법이 있습니까?

-- 업데이트됨 --

입력을 시작하면 입력이 보기로 스크롤되지만 키보드가 처음 표시될 때 입력은 키보드에 의해 가려집니다.

--

Your system information:

Cordova CLI: 6.5.0 
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: OS X El Capitan
Node Version: v6.1.0
Xcode version: Xcode 8.2.1 Build version 8C1002

초기화면

Domain 입력 요소 선택 후 화면

친애하는 ionic 팀 ( @manucorporat , @brandyscarney , @adamdbradley )
다음 버전에서 열심히 노력하고 있다는 것을 알고 있지만 이러한 키보드 문제는 앱 경험에 중요합니다. 가상 스크롤과 같은 다른 오랜 문제와 함께 높은 우선 순위를 부여하는 것을 고려하십시오.
거대한 앱 크기와 느린 시작은 짜증나지만 앱이 설치되고 실행될 때 키보드 처리와 같은 기본 사항에 대한 적절한 경험을 제공해야 합니다.

여기에서 차임해야 합니다. @mpaland 가 맞습니다. 앱의 기본 기능과 관련된 눈에 띄는 버그가 너무 많습니다(일부는 4개월이 지났지만 여전히 답장 없이 열려 있습니다!). 예를 들어 여기를 참조하십시오.

• #9633
• #9518
• #9514
• #8607

이것들은 겉보기에 썩은 채로 남겨진 반면 팀은 최근 분할 창과 같은 멋진 기능을 추가했습니다.

문제는 핵심 기능이 여전히 어떤 명백한 방식으로 손상되어 있으면 새 기능을 추가하는 것이 실제로 의미가 없다는 것입니다. 프레임워크에 추가하기 전에 기본 사항을 바로 잡는 것이 더 중요합니다.

모든 노력을 사랑하지만 우선 순위가 잘못된 것 같습니다.

여러분, 우선 순위를 지정하고 수정하는 가장 좋은 방법은 Ionic 팀이 문제를 테스트하고 찾을 수 있도록 _재현 가능한 코드_를 제공하는 것입니다. 스크린샷과 gif는 훌륭하지만 문제를 확인하는 데 사용할 수 있는 코드가 가장 좋습니다. #2센트

양식 및 입력의 경우 display: absolute 를 사용하여 위치를 지정하지 마십시오.

나는 또한 이러한 문제를 겪고 있습니다. 이것은 사소한 문제가 아닙니다. 해결 방법이 없어 보이는 문제가 1년 동안 어떻게 되었습니까?

입력 필드에 포커스가 있을 때 문제가 있습니다. 필드를 클릭할 때마다 화면이 위아래로 이동합니다. 누군가 나를 도와줄 수 있습니까?

Ionic 프레임워크 버전: 2.3.0
Ionic CLI 버전: 2.2.2
Ionic 앱 라이브러리 버전: 2.2.1
Ionic 앱 스크립트 버전: 1.1.4
iOS 배포 버전: 1.9.1
ios-sim 버전: 5.0.4
OS: macOS 시에라
노드 버전: v7.2.0
Xcode 버전: Xcode 8.2.1 빌드 버전 8C1002

@pedrodurek ionic의 사람들이 번식할 수 있도록 플런커를 제공하면 좋을 것입니다.

텍스트 점프 문제에 대한 임시 해결 방법을 찾았습니다. 이것은 수정이 아니라 본질적으로 더 나은 수정이 구현될 때까지 해킹입니다.

먼저 다음이 설정되어 있는지 확인합니다.

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

다음으로 app.module.ts에서 다음을 찾으십시오.

IonicModule.forRoot(YourApp)

다음과 같이 만드십시오.

IonicModule.forRoot(YourApp, {
      scrollAssist: false,
      autoFocusAssist: false
    }),

이것은 내가 가진 모든 점프 문제를 수정하지만 불행히도 사용자가 입력할 때 화면에서 탐색 모음을 밀어내는 효과가 있습니다. 이것은 내가 알아차린 유일한 나쁜 부작용인 것 같습니다.

@Tyler-Darby 솔루션을 공유해 주셔서 감사합니다. 최상의 솔루션은 아니지만 합리적인 솔루션이며 저에게 효과적이었습니다.

나는이 문제를 겪고 있었고 그것이 나를 미치게 만들었지 만 마침내 하드웨어 가속을 강제하기 위해 요소에 transform: translate3d(0,0,0) 를 적용하여 발생했다는 것을 알아 냈습니다. 키보드가 올 때 입력 포커스를 깨는 것으로 나타났습니다.

그것이 모든 사람의 문제의 원인은 아니지만 누군가를 도울 수 있기를 바랍니다.

나는 여러 플랫폼을 가지고 있으며 나는 그것을 고쳤습니다 ..

나는 app.component.ts에 넣었다:

constructor(
                ...
                public config: Config,
        ) {
                // all platforms
        this.config.set( 'scrollPadding', false )
        this.config.set( 'scrollAssist', false )
        this.config.set( 'autoFocusAssist', false )
        // android
        this.config.set( 'android', 'scrollAssist', true )
        this.config.set( 'android', 'autoFocusAssist', 'delay' )
               ...

아마도 누군가에게 도움이 될 것입니다.
힌트를 주셔서 감사합니다 ;)

비디오 확인:
https://www.dropbox.com/s/6p49z0chle9g1b9/git-ios-input.mov?dl=0

환경 정보:
글로벌 패키지:

@ionic/cli-utils : 1.3.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.3.0

로컬 패키지:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.3.0

체계:

Node       : v7.10.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 
ios-deploy : 1.9.0 
ios-sim    : 5.0.8

<input/> 를 <ion-input></ion-input>
그것으로 시도하십시오.

안녕하세요 @maulikakapure 입니다 .

회사를 위한 첫 번째 이온 응용 프로그램을 시작하고 있으며 키보드에 스크롤/초점 문제도 있습니다. 분명히 당신은 비디오에서 보여준 해결책을 찾았습니다. 소스 코드를 제공할 수 있습니까? 사용할 해결 방법, 구성 매개변수 및 html 태그의 올바른 조합을 아직 찾지 못했습니다.

감사 해요

@Tyler-Darby Hey Tyler님, 다음 코드는 어디에 넣어야 하나요?

this.keyboard.disableScroll(false);
this.keyboard.hideKeyboardAccessoryBar(true);

안녕하세요 @cwiejack

여기에서 간단한 데모를 확인하세요: https://www.dropbox.com/s/1o9hrnjgt7u3bpy/BasicDemo.zip?dl=0

감사 해요.

Ionic의 기본 키워드 문제를 해결하려면 app.module.ts의 가져오기에 다음을 입력하세요.

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

그러면 키보드 문제가 즉시 해결됩니다.

@aplimovil 이것은 내 안드로이드 앱의 문제를 해결했습니다! 당신에게 많은 건배!

scrollAssist 및 autoFocusAssist 를 true 하면 앱을 사용할 수 없게 된다면 무슨 의미가 있습니까?

활성화하면 몇 가지 이점이 있는 경우가 있습니까?

aplimovil의 수정은 내가 겪고 있던 모든 문제를 해결한 것 같습니다!

예, 왜 당신이 그 중 하나를 사실로 설정했는지에 관심이 있습니다.

@JefferE Ionic의 scrollAssist 및 autoFocusAssist 기능이 iOS에서 고장났기 때문입니다(Android에서는 거의 정상적으로 작동하지만 적어도 저에게는 개선 사항이 거의 눈에 띄지 않습니다). 여기에 모든 문제 보고서를 충분히 기록하지 않은 것 같습니다. 출시 예정입니다. 바라건대 그들이 언젠가 이 스레드를 알아차리고 iOS에서 해당 기능을 영원히 수정하거나 현재 iOS에서 기본적으로 선택적으로 해제할 수 있기를 바랍니다.

grid,keyboard.disablescroll(false)의 ion-textarea가 작동하지 않을 때 문제를 해결하는 방법

이것은 나를 위해 일했습니다.

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
            scrollPadding: false,
            scrollAssist: true,
            autoFocusAssist: false

    }),

이온 정보:

CLI Packages:

@ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.6.1

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.1 
    ios-sim           : 5.0.8 
    Node              : v6.11.3
    npm               : 3.10.10 
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b 

iOS 에서 키보드가 입력 필드 위로 스크롤되고 콘텐츠 화면이 키보드를 위한 공간을 만들기 위해 업데이트되지 않는다는 비슷한 문제가 있다는 것을 알려드리고 싶었습니다.

내가 알아낸 중요한 부분은 플러그인을 사용할 때(예: @ionic-native/keyboard)
키보드가 this.keyboard.onKeyboardShow().subscribe(()=>{ this.someFlag=true}) 표시되는 순간 인터페이스에 작업을 수행하고 인터페이스의 플래그를 사용하여 무언가를 변경합니다. 그것은 당신이 가져 각도 변경 감지 스스로를 트리거해야합니다 ChangeDetectorRef 하고 사용하여 detectChanges() 의 기능을 subscribe .

사례를 보여주기 위해 이 gitrepo 를 만들었습니다. 부담 없이 살펴보세요. subscribe(()=>{}) 에

오늘은 조금 더 현명해졌습니다 :)

마지막으로 모두들 즐거운 주말 보내세요!

이 문제가 1.5년이 넘었고 아무런 조치도 취하지 않았다는 사실이 저로서는 당혹스럽습니다. 이것은 내 앱의 흐름을 완전히 망치고 있습니다. 그것은 버그가 있고 품질이 좋지 않게 보이게 하고 우리는 모든 것을 멋지게 보이게 하기 위해 해킹을 해야 합니다. @mhartington 내부적으로 여기에서 무슨 일이 일어나고 있습니까?

저는 지금 ionic의 PRO 버전을 사용한 후 후속 조치로 Ionic의 @matthewkremer 와 전화 통화를

저에게도 마찬가지입니다. 이거 하나도 안예뻐보임..

안녕하세요, 이것이 우리의 최우선 과제가 되고 있습니다. 오늘 아침 @adamdbradley 의 트윗을 참조하세요 .

앞으로 몇 일/주에 업데이트를 기대하십시오

나는 우리가 불필요한 해킹을 적용하지 않고 곧 삶을 되찾기를 바랍니다.

이미 WK를 사용하는 사람들을 위해 새로운 키보드 플러그인을 준비 중입니다. cordova-plugin-ionic-wkkeyboard :

1. 먼저 ionic-plugin-keyboard를 제거합니다.

cordova plugin rm ionic-keyboard-plugin --save

1. 새 플러그인 설치:

cordova plugin add cordova-plugin-ionic-wkkeyboard --save

cc @hitendramalviya @ionut-movila @mmolhoek @Tyler-Darby @yingbaby @maulikakapure @aplimovil

이 새로운 wkkeyboard와 FormGroups 및 FormControls로 ion-textarea를 비활성화/활성화하는 데 이상한 문제가 있습니다. 전체 양식을 다시 활성화한 후 ion-textarea는 비활성화된 상태로 유지됩니다. '오래된' 키보드를 사용하는 동안에는 발생하지 않습니다.

오늘 밤에 문제를 만들겠습니다. :).

// 편집하다:
아마도 다른 것과 관련된 문제인 것 같습니다. 브라우저에서 동일한 동작.
https://github.com/ionic-team/ionic/issues/13170

키보드가 입력을 위한 스크롤은 물론이고 단순히 크기 조정을 트리거하지 않는 경우 무엇을 찾아야 합니까?

스크롤 문제가 이미 해결된 것 같지만 ios에서 여전히 입력이 화면 중앙에 있을 때 키보드가 올라갔을 때 입력이 스크롤되지 않는 문제가 발생합니다. 이것은 입력을 탭할 때나 키보드 탐색 키를 사용할 때 모두 문제입니다. 내가 뭔가를 놓치고 있습니까? 여기에 제시된 많은 솔루션을 시도했지만 작동하지 않는 것 같습니다. (추가 정보를 위해 기본 앱이 아닌 브라우저에서 Ionic을 사용하고 있습니다)

와우 2018 그리고 아무것도.

그들은 나에게이 솔루션을 주었지만 완전히 완벽하지는 않습니다

.스크롤 콘텐츠 {
padding-bottom: 0! 중요합니다.
}

안녕하세요 여러분, 실수로 기본 빌드에 _cordova-plugin-ionic-keyboard_가 있음을 발견했습니다. 그리고 _ionic-plugin-keyboard_로 교체했을 때 입력 버그가 사라졌습니다.

그래서 내 솔루션은 다음과 같습니다.
코르도바 플러그인 rm ionic-keyboard
ionic 코르도바 플러그인 ionic-plugin-keyboard 추가
npm install --save @ionic-native/keyboard

+1

Vendettall, 시도했지만 작동하지 않았습니다!

헤더 도구 모음에 이 성가신 버그가 있습니까?

2018년 3월 29일 목요일 오후 11시 31분, Emmanuel Fache [email protected]
썼다:

Vendettall, 시도했지만 작동하지 않았습니다!

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/ionic-team/ionic/issues/6228#issuecomment-377362762 ,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AYPMdggjRqZBZ0wghtxFjVbPLViBkR8hks5tjUSQgaJpZM4IKhUp
.

이 문제가 계속 발생하면 최신 이온 키보드 플러그인을 사용해 보십시오.

ionic cordova plugin rm  ionic-keyboard-plugin
ionic cordova plugin add cordova-plugin-ionic-keyboard

그런 다음 설정

<preference name="KeyboardResizeMode" value="ionic" />

config.xml에서

안녕하세요,
내가 작업하는 앱에서 모든 것이 잘 작동합니다. 그러나 어떤 이유로 인해 html 테이블 내의 입력을 사용해야합니다. 이 경우 입력을 클릭할 때마다 테이블이 다시 그려지고 테이블 스크롤이 재설정됩니다.
누구든지 여기에서 도울 수 있습니까?

또한 변환 문제가 발생하는 것을 봅니다. 꽤 짜증난다.

스크롤링 pb의 경우 여기에 해킹을 작성했습니다. https://github.com/ionic-team/ionic/issues/10629#issuecomment -395084125

2017년 8월 1일에 언급된

@dylanvdmerwe , @jgw96 @mhartington @Tyler-Darby @manucorporat @adamdbradley

안녕하세요 여러분, 저는 Ionic 2 및 3 응용 프로그램용 iOS 및 Android 플랫폼에서 이 문제를 처리하기 위해 방금 사용자 지정 지시문을 만들었습니다. 이 스크롤 문제와 관련된 모든 문제가 해결되는지 확인해 주시겠습니까?

이 지시문을 만들기 위해 scroll-into-view-if-needed ponyfill 을 사용했습니다.

npm install ion-input-scroll-into-view 명령을 실행하는 ion-input-scroll-into-view 지시문을 설치합니다.

1 단계
다음과 같이 ion-input-scroll-into-view 지시문을 ion-input 또는 ion-textarea에 연결합니다.

<ion-input ion-input-scroll-into-view></ion-input>

<ion-textarea ion-input-scroll-into-view></ion-textarea>

2 단계

다음과 같이 상위 구성 요소의 module.ts에서 IonInputScrollIntoViewModule을 가져와야 합니다.

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { IonInputScrollIntoViewModule } from 'ion-input-scroll-into-view';

@NgModule({
  declarations: [
    ParentPage
  ],
  imports: [
    IonicPageModule.forChild(ParentPage),
    IonInputScrollIntoViewModule
  ],
})
export class ParentPageModule {}

npm 링크 : https://www.npmjs.com/package/ion-input-scroll-into-view
깃허브 링크 : https://github.com/melwinVincent/ion-input-scroll-into-view

문제를 주셔서 감사합니다! Ionic 3의 소스 코드와 문제를 별도의 저장소로 옮겼습니다. 이 문제를 Ionic 3용 저장소로 옮기고 있습니다. 여기에서 이 문제를 추적하십시오.

아이오닉을 이용해 주셔서 감사합니다!

문제 이동: https://github.com/ionic-team/ionic-v3/issues/47