브라우저 지원
- 94
- 94
- x
- x
태블릿이나 휴대전화와 같은 기기에는 일반적으로 텍스트 입력을 위한 가상 키보드가 있습니다.
항상 존재하고 같은 물리적 키보드와 달리 가상 키보드가 표시됩니다.
사용자의 동작에 따라 사라지고 동적으로 적응할 수 있습니다.
예를 들어
inputmode
속성
이러한 유연성은 브라우저의 레이아웃 엔진에 가상 키보드가 존재하며 문서의 레이아웃을 조정해야 할 수도 있습니다. 있습니다. 예를 들어 사용자가 입력하려는 입력란이 스크롤해야 하기 때문에 브라우저가 스크롤해야 볼 수 있습니다
전통적으로 브라우저는 이러한 문제를 자체적으로 처리했지만 더 복잡한 응용 프로그램은 브라우저 동작을 더 세부적으로 제어해야 할 수 있습니다. 멀티스크린 휴대기기 등 기존 접근방식은 '낭비'를 초래하는 가상 키보드가 키보드의 한 화면 세그먼트에만 표시되지만 사용 가능한 표시 영역이 두 화면에서 축소되는 경우 하지만 아래 이미지는 VirtualKeyboard API를 사용하여 레이아웃을 최적화하는 방법을 보여줍니다. 문서의 크기를 동적으로 조정하여 가상 키보드의 존재를 보완합니다.
이와 같은 상황에서 VirtualKeyboard API가 유용합니다. 다음 세 부분으로 구성됩니다.
- 가상 머신에 대한 프로그래매틱 액세스를 위한
navigator객체의VirtualKeyboard인터페이스 키보드입니다. - 가상 키보드의 있습니다.
- 가상 키보드의 표시 여부를 결정하는 가상 키보드 정책입니다.
현재 상태
VirtualKeyboard API는 데스크톱 및 모바일의 Chromium 94부터 사용할 수 있습니다.
기능 감지 및 브라우저 지원
현재 브라우저에서 VirtualKeyboard API를 지원하는지 확인하려면 다음 스니펫을 사용하세요.
if ('virtualKeyboard' in navigator) {
// The VirtualKeyboard API is supported!
}
VirtualKeyboard API 사용
VirtualKeyboard API는 navigator 객체에 새 인터페이스 VirtualKeyboard를 추가합니다.
새로운 가상 키보드 동작 선택
가상 키보드 오클루전을 직접 처리하고 있음을 브라우저에 알리려면
먼저 불리언 속성 overlaysContent를 설정하여 새 가상 키보드 동작을 선택합니다.
true에게 전송합니다.
navigator.virtualKeyboard.overlaysContent = true;
가상 키보드 표시 및 숨기기
show() 메서드를 호출하여 프로그래매틱 방식으로 가상 키보드를 표시할 수 있습니다. 이 기능을 사용하려면
포커스가 맞춰진 요소는 양식 컨트롤 (예: textarea 요소)이거나 수정 호스트여야 함
예를 들어
contenteditable
속성). 이 메서드는 항상 undefined를 반환하지만 geometrychange 이벤트를 트리거합니다.
이전에 가상 키보드가 표시되지 않았던 것입니다.
navigator.virtualKeyboard.show();
가상 키보드를 숨기려면 hide() 메서드를 호출합니다. 이 메서드는 항상 undefined를 반환하지만
이전에 가상 키보드가 표시된 경우 geometrychange 이벤트
navigator.virtualKeyboard.hide();
현재 도형 가져오기
boundingRect 속성을 확인하여 가상 키보드의 현재 도형을 가져올 수 있습니다.
가상 키보드의 현재 크기를
DOMRect 객체
인셋은 상단, 오른쪽, 하단 및/또는 왼쪽 속성에 해당합니다.
const { x, y, width, height } = navigator.virtualKeyboard.boundingRect;
console.log('Virtual keyboard geometry:', x, y, width, height);
도형 변경사항 알림 받기
가상 키보드가 표시되거나 사라질 때마다 geometrychange 이벤트가 전달됩니다. 이
이벤트의 target 속성에는 virtualKeyboard 객체가 포함되어 있으며, 이 객체는 위에서 설명한 것처럼 가상 키보드 인셋의 새 도형을
DOMRect
navigator.virtualKeyboard.addEventListener('geometrychange', (event) => {
const { x, y, width, height } = event.target.boundingRect;
console.log('Virtual keyboard geometry changed:', x, y, width, height);
});
CSS 환경 변수
VirtualKeyboard API는
변경할 수 있습니다.
inset CSS 속성과 유사하게 모델링됩니다.
즉, top, right, bottom 및/or left 속성에 해당합니다.
keyboard-inset-topkeyboard-inset-rightkeyboard-inset-bottomkeyboard-inset-leftkeyboard-inset-widthkeyboard-inset-height
가상 키보드 인셋은 여섯 가지 환경 변수로, 상단, 오른쪽,
맨 아래, 왼쪽 인셋을 제거합니다. 너비 및 높이 인셋이 계산됨
인체공학을 위한 다른 인셋에서 추출했습니다. 각 키보드 삽입의 기본값은
대체 값이 제공되지 않은 경우 0px입니다.
일반적으로 아래 예와 같이 환경 변수를 사용합니다.
.some-class {
/**
* Use a margin that corresponds to the virtual keyboard's height
* if the virtual keyboard is shown, else use the fallback value of `50px`.
*/
margin-block-end: env(keyboard-inset-height, 50px);
}
.some-other-class {
/**
* Use a margin that corresponds to the virtual keyboard's height
* if the virtual keyboard is shown, else use the default fallback value of `0px`.
*/
margin-block-end: env(keyboard-inset-height);
}
가상 키보드 정책
수정 가능한 요소에 포커스가 있을 때 가상 키보드가 표시되지 않아야 하는 경우가 있습니다. 예시로는
스프레드시트 응용 프로그램을 사용하면 사용자가 셀을 탭하여 그 값이 계산되는
다른 셀입니다. virtualkeyboardpolicy은 키워드가 auto 및
manual입니다. contenteditable 호스트인 요소에 지정된 경우 auto는
해당 수정 가능한 요소를 사용하여 포커스가 있거나 가상 키보드를 자동으로 표시할 수 있습니다.
manual는 가상 요소의 변경사항에서 포커스를 분리하고 수정 가능한 요소를 탭합니다.
현재 상태입니다.
<!-- Do nothing on regular focus, but show the virtual keyboard on double-click. -->
<div
contenteditable
virtualkeyboardpolicy="manual"
inputmode="text"
ondblclick="navigator.virtualKeyboard.show();"
>
Double-click to edit.
</div>
데모
가상 키보드 API가 작동하는 것을
demo를 살펴봅니다. 자세한 내용은
소스 코드를 검토하여 구현 방법을 확인하세요.
geometrychange 이벤트는 삽입된 iframe에서 관찰될 수 있지만 실제 가상 키보드는
자체 브라우저 탭에서 데모를 열어야 합니다.
유용한 링크
감사의 말씀
VirtualKeyboard API는 Microsoft의 Anupam Snigdha에 의해 지정되었으며 Microsoft의 전 편집자 Grisha Lyukshin도 마찬가지입니다. 히어로 이미지 제공자 @freestocks - 스플래시 해제.