Quyền kiểm soát toàn bộ nhờ API VirtualKeyboard

Thomas Steiner

Các thiết bị như máy tính bảng hoặc điện thoại di động thường có bàn phím ảo để nhập văn bản. Không giống như bàn phím vật lý luôn hiện diện và luôn giống nhau, bàn phím ảo sẽ xuất hiện và biến mất, tuỳ thuộc vào hành động của người dùng. Hành động này cũng có thể thích ứng một cách linh hoạt dựa trên inputmode .

Tính linh hoạt này đi kèm với mức giá mà công cụ bố cục của trình duyệt phải được thông báo về sự hiện diện của bàn phím ảo và có thể cần phải điều chỉnh bố cục của tài liệu để bù đắp. Ví dụ: trường nhập dữ liệu mà người dùng sắp nhập có thể bị che khuất bởi bàn phím ảo để trình duyệt phải cuộn bàn phím đó vào chế độ xem.

Thông thường, các trình duyệt đã tự giải quyết thách thức này, nhưng các ứng dụng phức tạp hơn có thể yêu cầu kiểm soát nhiều hơn đối với hành vi của trình duyệt. Ví dụ: thiết bị di động nhiều màn hình mà phương pháp truyền thống sẽ dẫn đến "sự lãng phí" màn hình bất động sản nếu bàn phím ảo chỉ hiển thị trên một phân đoạn màn hình, nhưng khung nhìn có sẵn bị thu nhỏ trên cả hai màn hình dù sao đi nữa. Hình ảnh bên dưới cho thấy cách dùng VirtualKeyboard API để tối ưu hoá bố cục của tài liệu một cách linh động để bù đắp cho sự hiện diện của bàn phím ảo.

VirtualKeyboard API xuất hiện trong những tình huống như thế này. Nó bao gồm ba phần:

• Giao diện VirtualKeyboard trên đối tượng navigator cho quyền truy cập vào môi trường ảo bàn phím từ JavaScript.
• Một tập hợp các biến môi trường CSS cung cấp thông tin về bàn phím ảo ngoại hình.
• Chính sách bàn phím ảo xác định xem bàn phím ảo có hiển thị hay không.

Trạng thái hiện tại

VirtualBàn phím API có trong Chromium 94 trên máy tính và thiết bị di động.

Phát hiện tính năng và hỗ trợ trình duyệt

Để biết liệu VirtualKeyboard API có được hỗ trợ trong trình duyệt hiện tại hay không, hãy sử dụng đoạn mã sau:

if ('virtualKeyboard' in navigator) {
  // The VirtualKeyboard API is supported!
}

Sử dụng VirtualKeyboard API

VirtualKeyboard API thêm giao diện mới VirtualKeyboard vào đối tượng navigator.

Chọn sử dụng chế độ bàn phím ảo mới

Để thông báo cho trình duyệt biết rằng bạn đang tự mình xử lý việc che khuất bàn phím ảo, bạn cần trước tiên, hãy chọn sử dụng chế độ bàn phím ảo mới bằng cách đặt thuộc tính boolean overlaysContent đến true.

navigator.virtualKeyboard.overlaysContent = true;

Hiện và ẩn bàn phím ảo

Bạn có thể lập trình hiển thị bàn phím ảo bằng cách gọi phương thức show(). Để làm được điều này, phần tử lấy tiêu điểm phải là một thành phần điều khiển biểu mẫu (chẳng hạn như phần tử textarea) hoặc là một thành phần lưu trữ chỉnh sửa (ví dụ: bằng cách sử dụng contenteditable ). Phương thức này luôn trả về undefined nhưng kích hoạt sự kiện geometrychange nếu bàn phím ảo trước đó không hiển thị.

navigator.virtualKeyboard.show();

Để ẩn bàn phím ảo, hãy gọi phương thức hide(). Phương thức này luôn trả về undefined nhưng kích hoạt sự kiện geometrychange nếu bàn phím ảo đã hiển thị trước đó.

navigator.virtualKeyboard.hide();

Lấy hình học hiện tại

Bạn có thể biết hình dạng hiện tại của bàn phím ảo bằng cách xem thuộc tính boundingRect. Lớp này hiển thị các kích thước hiện tại của bàn phím ảo dưới dạng Đối tượng DOMRect. Phần lồng ghép tương ứng với các thuộc tính trên cùng, bên phải, dưới cùng và/hoặc bên trái.

const { x, y, width, height } = navigator.virtualKeyboard.boundingRect;
console.log('Virtual keyboard geometry:', x, y, width, height);

Nắm bắt những thay đổi về hình học

Bất cứ khi nào bàn phím ảo xuất hiện hoặc biến mất, sự kiện geometrychange sẽ được gửi đi. Chiến lược phát hành đĩa đơn thuộc tính target của sự kiện chứa đối tượng virtualKeyboard (như đã thảo luận ở trên) có chứa hình học mới của phần lồng ghép bàn phím ảo dưới dạng DOMRect.

navigator.virtualKeyboard.addEventListener('geometrychange', (event) => {
  const { x, y, width, height } = event.target.boundingRect;
  console.log('Virtual keyboard geometry changed:', x, y, width, height);
});

Biến môi trường CSS

VirtualKeyboard API hiển thị một tập hợp các biến môi trường CSS giúp cung cấp thông tin về giao diện của bàn phím ảo. Các tài sản này được lập mô hình tương tự như tài sản CSS inset, tức là tương ứng với các thuộc tính trên cùng, bên phải, dưới cùng và/hoặc bên trái.

• keyboard-inset-top
• keyboard-inset-right
• keyboard-inset-bottom
• keyboard-inset-left
• keyboard-inset-width
• keyboard-inset-height

Các phần lồng ghép bàn phím ảo là sáu biến môi trường xác định hình chữ nhật theo cạnh trên, bên phải dưới cùng và phần lồng ghép bên trái tính từ cạnh của khung nhìn. Phần lồng ghép chiều rộng và chiều cao được tính từ các phần lồng ghép khác đối với công thái học dành cho nhà phát triển. Giá trị mặc định của mỗi phần lồng ghép bàn phím là 0px nếu không cung cấp giá trị dự phòng.

Bạn thường sử dụng các biến môi trường như trong ví dụ dưới đây:

.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);
}

Chính sách về bàn phím ảo

Đôi khi, bàn phím ảo sẽ không xuất hiện khi một phần tử có thể chỉnh sửa được lấy làm tiêu điểm. Ví dụ: ứng dụng bảng tính trong đó người dùng có thể nhấn vào một ô để giá trị của ô đó được đưa vào công thức một ô khác. virtualkeyboardpolicy là một thuộc tính có từ khoá là các chuỗi auto và manual. Khi được chỉ định trên một phần tử là máy chủ lưu trữ contenteditable, auto sẽ khiến phần tử có thể chỉnh sửa tương ứng để tự động hiển thị bàn phím ảo khi bàn phím được đặt tiêu điểm hoặc đã nhấn, còn manual tách tiêu điểm và nhấn vào phần tử có thể chỉnh sửa từ các thay đổi trong môi trường ảo trạng thái hiện tại của bàn phím.

<!-- 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>

Bản minh hoạ

Bạn có thể thấy VirtualKeyboard API hoạt động trong bản minh hoạ trên Glitch. Hãy nhớ khám phá mã nguồn để xem cách triển khai mã. Mặc dù có thể quan sát các sự kiện geometrychange trong nội dung nhúng iframe, nhưng bàn phím ảo thực tế yêu cầu mở bản minh hoạ trong thẻ trình duyệt của chính nó.

Đường liên kết hữu ích

• Thông số kỹ thuật
• Kho lưu trữ
• Mục ChromeStatus
• Lỗi Chromium
• Bài đánh giá về W3C TAG
• Yêu cầu vị trí tiêu chuẩn của Mozilla
• Yêu cầu vị trí theo tiêu chuẩn WebKit

Xác nhận

VirtualKeyboard API do Anupam Snigdha chỉ định từ Microsoft, với sự đóng góp của cựu biên tập viên Grisha Lyukshin, cũng làm việc tại Microsoft. Hình ảnh chính của @freestocks đang bật Không hiển thị màn hình.