VirtualKeyboard API를 사용한 완전한 제어

Thomas Steiner

태블릿이나 휴대전화와 같은 기기에는 일반적으로 텍스트 입력을 위한 가상 키보드가 있습니다. 항상 존재하고 같은 물리적 키보드와 달리 가상 키보드가 표시됩니다. 사용자의 동작에 따라 사라지고 동적으로 적응할 수 있습니다. 예를 들어 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-top
• keyboard-inset-right
• keyboard-inset-bottom
• keyboard-inset-left
• keyboard-inset-width
• keyboard-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에서 관찰될 수 있지만 실제 가상 키보드는 자체 브라우저 탭에서 데모를 열어야 합니다.

유용한 링크

• 사양
• 저장소
• ChromeStatus 항목
• Chromium 버그
• W3C TAG 검토
• Mozilla 표준 배치 요청
• WebKit 표준 위치 요청

감사의 말씀

VirtualKeyboard API는 Microsoft의 Anupam Snigdha에 의해 지정되었으며 Microsoft의 전 편집자 Grisha Lyukshin도 마찬가지입니다. 히어로 이미지 제공자 @freestocks - 스플래시 해제.