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

Twitter GitHub Sự cố Bảng tin Trang chủ

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 vật lý luôn tồn tại 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 thao tác của người dùng. Bàn phím ảo cũng có thể tự động điều chỉnh theo, chẳng hạn như dựa trên thuộc tính 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ụ: một trường nhập dữ liệu mà người dùng sắp nhập có thể bị bàn phím ảo che khuất, vì vậy trình duyệt phải cuộn trường đó vào khung hiển thị.

Thông thường, các trình duyệt đã tự xử lý 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ụ: thiết bị di động nhiều màn hình, trong đó phương pháp truyền thống sẽ dẫn đến tình trạng không gian màn hình "bị lãng phí" 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 trên cả hai màn hình vẫn không 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 tiếp cận truyền thống dẫn đến

Các tình huống như thế này sẽ xuất hiện VirtualKeyboard API. 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 về bàn phím ảo xác định việc có hiển thị bàn phím ảo hay không.

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

VirtualKeyboard API hiện 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

Để phát hiện xem VirtualKeyboard API đượ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 bàn phím ảo mới

Để cho trình duyệt biết rằng bạn đang tự xử lý các trường hợp che 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 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ử đượ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ủ lưu trữ 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 sẽ kích hoạt một sự kiện geometrychange nếu bàn phím ảo không hiển thị trước đó.

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 sẽ kích hoạt một sự kiện geometrychange nếu bàn phím ảo đã hiển thị trước đó.

navigator.virtualKeyboard.hide();

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

Bạn có thể xem 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. Phương thức này hiển thị 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 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);

Nhận thông báo về 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. 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 dạng 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 thành phần 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 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à 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, dưới cùng và bên trái tính từ cạnh của khung nhìn. Các phần lồng ghép chiều rộng và chiều cao được tính toán từ các phần lồng ghép khác cho công thái học của 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 bạn 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 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 ô để đưa giá trị 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ủ 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 được lấy làm tâm điểm hoặc được nhấn, đồng thời manual tách tiêu điểm và nhấn vào phần tử có thể chỉnh sửa đó khỏi các thay đổi về 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 API VirtualKeyboard trong thực tế 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ù bạn có thể quan sát được các sự kiện geometrychange khi nhúng iframe, nhưng thực tế thì hành vi trên bàn phím ảo yêu cầu mở bản minh hoạ trong thẻ trình duyệt của chính nội dung đó.

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

Xác nhận

VirtualKeyboard API do Anupam Snigdha làm việc tại Microsoft, với sự đóng góp của cựu biên tập viên Grisha Lyukshin, tương tự như của Microsoft. Hình ảnh chính của @freestocks trên Unsplash.