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ượngnavigator
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 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 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.