VirtualKeyboard API

Khái niệm

VirtualKeyboard API bao gồm ba phần:

• Giao diện VirtualKeyboard, được truy cập thông qua navigator.virtualKeyboard, được dùng để không tuân theo hành vi bàn phím ảo tự động, hiển thị hoặc ẩn bàn phím ảo theo chương trình, cũng như lấy vị trí và kích thước hiện tại của bàn phím ảo.
• Các biến môi trường CSS keyboard-inset-* cung cấp thông tin về vị trí và kích thước của bàn phím ảo.
• Thuộc tính virtualkeyboardpolicy chỉ định liệu bàn phím ảo có xuất hiện trên các phần tử contenteditable hay không.

Không tuân theo hành vi bàn phím ảo tự động

Để không tuân theo hành vi bàn phím ảo tự động của trình duyệt, dùng navigator.virtualKeyboard.overlaysContent = true. Trình duyệt sẽ không còn tự động thay đổi kích thước viewport để dành chỗ cho bàn phím ảo, thay vào đó nó sẽ phủ lên nội dung của bạn.

Phát hiện hình học bàn phím ảo bằng JavaScript

Sau khi bạn không tuân theo hành vi mặc định của trình duyệt, bạn có thể lấy hình học hiện tại của bàn phím ảo bằng navigator.virtualKeyboard.boundingRect, và điều chỉnh bố cục phù hợp bằng CSS và JavaScript. Ngoài ra, bạn có thể lắng nghe các thay đổi hình học, chẳng hạn khi bàn phím được hiển thị hoặc ẩn, bằng sự kiện geometrychange.

if ("virtualKeyboard" in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;

  navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
    const { x, y, width, height } = event.target.boundingRect;
  });
}

Phát hiện hình học bàn phím ảo bằng biến môi trường CSS

VirtualKeyboard API cũng hiển thị các biến môi trường CSS sau: keyboard-inset-top, keyboard-inset-right, keyboard-inset-bottom, keyboard-inset-left, keyboard-inset-width, và keyboard-inset-height.

<ul id="messages"></ul>
<input type="text" />

body {
  display: grid;
  margin: 0;
  height: 100vh;
  grid-template:
    "messages" 1fr
    "input" auto
    "keyboard" env(keyboard-inset-height, 0px);
}

if ("virtualKeyboard" in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;
}

Kiểm soát bàn phím ảo trên các phần tử contenteditable

Đặt thuộc tính virtualkeyboardpolicy thành manual để ngăn xử lý mặc định của bàn phím ảo trong trình duyệt, và thay vào đó tự xử lý nó bằng các phương thức show() và hide() của giao diện VirtualKeyboard.

<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>

if ("virtualKeyboard" in navigator) {
  navigator.virtualKeyboard.overlaysContent = true;

  const editor = document.getElementById("editor");
  editor.addEventListener("dblclick", () => {
    navigator.virtualKeyboard.show();
  });
}

Giao diện

VirtualKeyboard Thử nghiệm

Cung cấp các hàm lấy bản đồ bố cục bàn phím và bật/tắt việc nắm bắt lần nhấn phím từ bàn phím vật lý.

Mở rộng cho các giao diện khác

Navigator.virtualKeyboard Read only Thử nghiệm

Trả về tham chiếu đến VirtualKeyboard API để kiểm soát bàn phím ảo trên màn hình.

HTMLElement.virtualkeyboardpolicy Thử nghiệm

Một chuỗi chỉ định liệu có dùng chính sách mặc định của trình duyệt để hiển thị bàn phím ảo khi phần tử được focus, hay tự xử lý việc hiển thị bàn phím ảo.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• Full control with the VirtualKeyboard API