2011-11-23 3 views
10

Xcode의 iOS 용 PhoneGap에 압축 된 HTML5/Javascript (Sencha) 앱이 있습니다. 한 가지 방법 또는 다른 방법으로 키보드 열기/닫기 이벤트를 수신하고 이에 따라 작업을 수행 할 수 있기를 원합니다. 이 일을 할 수있는 방법이 있습니까?Javascript/Sencha에서 키보드 열림/닫음을 듣는 방법?

+0

textfield, textareafield ...에 집중하는 동안 키보드가 자동으로 호출됩니다. 그래서 자바 스크립트에서 포커스 이벤트에 리스너를 생성 할 수 있습니다. – heyjii

+0

그런 다음 텍스트 필드 등이 포커스를 잃을 때도 듣고 싶습니다. 이벤트가 있습니까? – Groppe

+0

흐림 이벤트를 사용할 수 있다고 생각합니다 – heyjii

답변

8

textfield, textareafield ...에 집중하는 동안 키보드가 자동으로 호출됩니다. 그래서 포커스 이벤트에 청취자를 생성 할 수 있습니다.이 이벤트는 자바 스크립트에서 키보드 열기 이벤트를 수신하는 것과 비슷합니다. 또한 흐림 청취자를 사용하여 키보드 닫기를 처리 할 수 ​​있습니다.

감사합니다.

+0

나는 setfocus에 이것을 사용하고있다. inpMessage.fieldEl.dom.focus(); 장치에없는 크롬에서 잘 작동합니다. –

+0

키보드가 활성화되기 전에 실행되므로 위치/레이아웃 조정이 필요한 경우 너무 일찍 시작될 수 있습니다. –

+5

답변을 게시하기 전에 더 많은 테스트를 수행해야합니다. Android 기기의 뒤로 버튼을 탭하면 키보드가 숨겨 지지만 흐림 이벤트는 발생하지 않습니다. – filipvkovic

1

내 생각에 PhoneGap의 Android 빌드에서만 가능하다는 것을 알 수 있습니다. 당겨 받기 요청 (https://github.com/phonegap/phonegap-android/issues/94)을 참조하십시오.

이벤트는 hidekeyboardshowkeyboard입니다. 그들이 iOS에서도 실행되는지 확인할 수 있습니다.

10

나는 동일한 문제가 발생했습니다, 나는 귀하의 경우 최선의 해결책이 하나 같이 기본 이벤트를 결합하는 폰갭 플러그인을 사용하는 것입니다 생각 :

https://github.com/driftyco/ionic-plugins-keyboard/tree/60b803617af49a10aff831099db90340e5bb654c

그것은 작동 Android 및 iOS 같은 방식에 큰 단지 해당 이벤트를 바인딩 : (커서가 입력/텍스트 영역에 남아 있기 때문에) 개방 상태를 트리거

window.addEventListener('native.showkeyboard', keyboardShowHandler); 

window.addEventListener('native.hidekeyboard', keyboardHideHandler); 
+0

이것이 유일한 방법입니다. 감사. –

2

는 온 클릭 또는 onfocus 및 이벤트 사용 쉽지만, 이벤트 및 onblur 키보드를 닫을에서 해고되지 . 그래서 키보드 열기/닫기에서 크게 변경되는 창 높이를 감지하여 해결책을 찾았습니다.

Android 및 iOS의 최신 브라우저에서도 작동합니다. 데모 : http://jsfiddle.net/qu1ssabq/3/

addEventListener 또는 innerHeight를 지원하지 않는 장치에 대한 코드를 향상시킬 수 있습니다. 인터넷에서 사용할 수있는 대안이 있습니다.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"> 
<title>Detect keyboard opened/closed event</title> 
</head> 
<body> 

<textarea id="txta" onclick="xfocus()" onblur="xblur()"></textarea><br> 

<span id="status" style="background: yellow; width: auto;">closed</span> 

<script type="text/javascript"> 
    function xfocus() { 
    setTimeout(function() { 
     height_old = window.innerHeight; 
     window.addEventListener('resize', xresize); 
     document.getElementById('status').innerHTML = 'opened'; // do something instead this 
    }, 500); 
    } 
    function xresize() { 
    height_new = window.innerHeight; 
    var diff = Math.abs(height_old - height_new); 
    var perc = Math.round((diff/height_old) * 100); 
    if (perc > 50) 
     xblur(); 
    } 
    function xblur() { 
    window.removeEventListener('resize', xresize); 
    document.getElementById('status').innerHTML = 'closed'; // do something instead this 
    } 
</script> 

</body> 
</html> 
관련 문제