Trang này được dịch bởi Cloud Translation API.

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

Thomas Steiner

Hỗ trợ trình duyệt

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 thực luôn xuất hiện và luôn giống nhau, bàn phím ảo xuất hiện và biến mất tuỳ thuộc vào hành động của người dùng, đồng thời có thể tự động điều chỉnh theo hành động đó, ví dụ: dựa trên thuộc tính inputmode.

Tính linh hoạt này có giá là 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 điều chỉnh bố cục của tài liệu để bù lại. Ví dụ: bàn phím ảo có thể che khuất trường nhập mà người dùng sắp nhập, vì vậy, trình duyệt phải cuộn trường đó vào chế độ xem.

Theo truyền thống, 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 nhiều quyền kiểm soát hơn đối với hành vi của trình duyệt. Ví dụ: các thiết bị di động nhiều màn hình, trong đó phương pháp truyền thống sẽ dẫn đến việc "lãng phí" không gian màn hình 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. Hình ảnh bên dưới cho thấy cách sử dụng VirtualKeyboard API để tối ưu hoá bố cục của tài liệu một cách linh động nhằm bù đắp cho sự hiện diện của bàn phím ảo.

Phương pháp truyền thống dẫn đến

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 để truy cập có lập trình vào bàn phím ảo từ JavaScript.
Một tập hợp các biến môi trường CSS cung cấp thông tin về giao diện của bàn phím ảo.
Chính sách bàn phím ảo xác định xem có nên hiển thị bàn phím ảo hay không.

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

VirtualKeyboard 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 hành vi mới của bàn phím ảo

Để cho trình duyệt biết rằng bạn đang tự xử lý việc che khuất bàn phím ảo, trước tiên, bạn cần chọn sử dụng hành vi bàn phím ảo mới bằng cách đặt thuộc tính boolean overlaysContent thành 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(). Để tính năng này hoạt động, phần tử được lấy tiêu điểm cần 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 máy chủ chỉnh sửa (ví dụ: bằng cách sử dụng thuộc tính contenteditable). Phương thức này luôn trả về undefined nhưng kích hoạt sự kiện geometrychange nếu trước đó bàn phím ảo 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);

Được thông báo về các 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. Thuộc tính target của sự kiện chứa đối tượng virtualKeyboard (như đã thảo luận ở trên) 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 cung cấp thông tin về giao diện của bàn phím ảo. Các thuộc tính này được mô hình hoá tương tự như thuộc tính CSS inset, nghĩa là tương ứng với các thuộc tính trên, phải, dưới và/hoặc 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à 6 biến môi trường xác định một hình chữ nhật theo các phần lồng ghép trên cùng, bên phải, bên dưới và bên trái từ cạnh khung nhìn. Các 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 cho 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.

Thông thường, bạn sẽ sử dụng các biến môi trường như trong ví dụ bên dưới:

.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ụ: một ứ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 của 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ủ 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 được lấy tiêu điểm hoặc nhấn vào, đồng thời manual tách biệt tiêu điểm và thao tác nhấn vào phần tử có thể chỉnh sửa khỏi các thay đổi trong trạng thái hiện tại của bàn phím ảo.

<!-- 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ể xem VirtualKeyboard API hoạt động trong một bản minh hoạ trên Glitch. Hãy nhớ khám phá mã nguồn để xem cách triển khai mã này. Mặc dù bạn có thể quan sát các sự kiện geometrychange trong iframe được nhúng, nhưng hành vi bàn phím ảo thực tế yêu cầu bạn mở bản minh hoạ trong thẻ trình duyệt riêng.

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

Lời cảm ơn

API VirtualKeyboard do Anupam Snigdha thuộc Microsoft chỉ định, với sự đóng góp của cựu biên tập viên Grisha Lyukshin, cũng thuộc Microsoft.