iScroll 4 폼 요소 초점 및 키보드 이상 문제

본 고 는 zawa 동료 가 쓴 박문 입 니 다. webapp 개발 중인 많은 친구 들 이 iscroll 4 를 사용 하면 발생 할 수 있 는 이 문 제 를 믿 고 zawa 형의 건 의 를 물 어 봤 습 니 다. 여기 서 공유 하 겠 습 니 다. 여러분 께 도움 이 되 기 를 바 랍 니 다 ~
원문 주소: http://www.zawaliang.com/2013/10/443.html
 
문제: iSroll 4 를 사용 한 용기 에서 폼 요소 focus 가 초점 을 맞 춘 후 키보드 가 나타 날 때 iSroll 영역 높이 가 업데이트 되 지 않 고 스크롤 이상 문제 가 발생 할 수 있 습 니 다.또한 현재 초점 을 맞 춘 폼 요 소 는 시각 적 인 지역 에 나타 나 지 않 고 사용자 체험 에 영향 을 줄 수 있 습 니 다.
iKeyboard Scroll 4 는 바로 이러한 해결 방안 입 니 다. Github 참조: https://github.com/zawaliang/iKeyboardScroll4
현재 대부분의 기종 은 onorientationchange 이 벤트 를 지원 합 니 다. iScroll 4 는 onorientationchange 이 벤트 를 지원 하지 않 는 기종 에서 onresize 이 벤트 를 사용 하여 스크롤 영역 을 자동 으로 새로 고침 합 니 다.그래서 위 에서 말 한 폼 의 경우 대부분 기종 에서 고도 가 갱신 되 지 않 는 상황 이 존재 한다.

RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',

문 제 는 키보드 의 출현 여 부 를 확인 하고 refresh 인터페이스 로 스크롤 영역 높이 를 새로 고 치 는 것 이다.키보드 상 태 를 감지 할 인터페이스 가 없 기 때문에 onresize 를 통 해 창 높이 변 화 를 감지 하고 현재 요소 의 초점 상태 에 맞 춰 키보드 상 태 를 모 의 합 니 다.키보드 가 나 올 때 화면 을 뒤 집 는 상황 도 고려 해 야 한다.
오리 엔 테 이 션 change 와 onresize 중 어느 것 이 먼저 촉발 되 는 지 확실 하지 않 으 며, 안 드 로 이 드 에서 오리 엔 테 이 션 change 를 가 져 온 후 고도 에 시간 차 가 존재 하기 때문에 onresize 로 통일 하여 처리 합 니 다.

$(window).on('orientationchange', function(e) {
        _landscape2 = !!(window.orientation & 2);
    }).on('resize', function(e) {
        //    orientationchange onresize     ,      
        setTimeout(function() {
           // Android orientationchange    window    
            if (_landscape != _landscape2) {
                //                  ,    
                if (_display) {
                    var tmpWidth = _initWinWidth;
                    _initWinWidth = _initWinHeight;
                    _initWinHeight = tmpWidth;
                } else {
                    _initWinWidth = $(window).width();
                    _initWinHeight = $(window).height();
                }
            }
 

            var h = $(window).height();
            _display = _activeElement !== null && _initWinHeight > h;
            $.each(_callback, function(k, v) {
                v.apply(null, [_display, _activeElement]);
            });
            _landscape = _landscape2;
        }, 200);
    });

초점 요소 가 존재 하고 창 높이 가 초기 화 된 창 높이 보다 시간 이 높 으 면 키보드 가 나 타 났 다 고 생각 합 니 다.

_display = _activeElement !== null && _initWinHeight > h;

키보드 의 문제 가 해결 되 었 습 니 다. 우 리 는 초점 요소 의 위치 문 제 를 해결 해 야 합 니 다. 그렇지 않 으 면 초점 요소 가 시각 영역 에 없 는 상황 이 발생 할 수 있 습 니 다. 사용 자 는 현재 입력 한 것 이 무엇 인지 전혀 모 릅 니 다.주의해 야 할 것 은 iOS 6 에서 시스템 이 초점 을 맞 추 는 요 소 를 자동 으로 찾 을 수 있 지만 업 그 레이 드 된 iOS 7 은 '정상' 이 아니 라 안 드 로 이 드 와 비슷 하 게 표현 되 기 때문에 우 리 는 비 iOS 6 와 iOS 7 만 처리 하면 된다 는 것 이다.

//         ,       
// iOS6         ,     refresh  
// iOS7          ,   Android  
if ((!$.os.ios || _ios7)
   && display && focusElement) {
   offset = $.type(offset) == 'number' ? offset : 5;
   var el = $(focusElement),
       winHeight = $(window).height(),
       top = el.height() + el.offset().top + offset;

   // iScrollInstance.y   
   if (top - iScrollInstance.y > winHeight) {
      iScrollInstance.scrollTo(0, winHeight - top + iScrollInstance.y, 0);
   }
   // iOS7        ,      ,     
   _ios7 && focusElement.focus();

}

iOS 7 하면 이상 한 점 이 있 습 니 다. 입력 상 자 를 누 르 면 키보드 가 나타 나 지만 입력 상 자 는 초점 을 맞 추 지 않 습 니 다.수 동 으로 한 번 더 클릭 해 야 합 니 다.초보적인 조 사 는 iScroll 4 의 문제 이지 만 무슨 문제 가 생 겼 는 지 모 르 기 때문에 iKeyboard Scroll 4 에서 이러한 상황 을 처리 하여 이 문 제 를 잠시 해결 했다.
모 바 일 웹 앱 구덩이 가 많아 서 경험 을 쌓 아야 해 요 ~