VirtualKeyboard
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Giao diện VirtualKeyboard của VirtualKeyboard API hữu ích trên các thiết bị có bàn phím ảo trên màn hình, chẳng hạn như máy tính bảng, điện thoại di động, hoặc các thiết bị khác mà bàn phím phần cứng có thể không có.
Giao diện VirtualKeyboard giúp thoát ra khỏi cách xử lý tự động của trình duyệt đối với bàn phím ảo trên màn hình bằng cách giảm chiều cao của viewport để nhường chỗ cho bàn phím ảo. Bạn có thể ngăn trình duyệt thay đổi kích thước viewport, phát hiện vị trí và kích thước của bàn phím ảo, điều chỉnh bố cục trang web của bạn cho phù hợp, và lập trình hiển thị hoặc ẩn bàn phím ảo.
Bạn truy cập giao diện VirtualKeyboard bằng cách sử dụng navigator.virtualKeyboard.
Thuộc tính phiên bản
Giao diện VirtualKeyboard kế thừa các thuộc tính từ giao diện cha, EventTarget.
VirtualKeyboard.boundingRectRead only Experimental-
Một
DOMRectmô tả hình học của bàn phím ảo. VirtualKeyboard.overlaysContentExperimental-
Một
Booleanxác định xem trình duyệt có nên ngừng xử lý bàn phím ảo trên màn hình hay không.
Phương thức phiên bản
Giao diện VirtualKeyboard kế thừa các phương thức từ giao diện cha, EventTarget.
VirtualKeyboard.show()Experimental-
Hiển thị bàn phím ảo.
VirtualKeyboard.hide()Experimental-
Ẩn bàn phím ảo.
Sự kiện
geometrychangeExperimental-
Được kích hoạt khi hình học của bàn phím ảo trên màn hình thay đổi, xảy ra khi bàn phím ảo xuất hiện hoặc biến mất.
Ví dụ
Ví dụ sau minh họa cách thoát ra khỏi hành vi tự động của bàn phím ảo và phát hiện hình học của bàn phím ảo trong trang web:
if ("virtualKeyboard" in navigator) {
navigator.virtualKeyboard.overlaysContent = true;
navigator.virtualKeyboard.addEventListener("geometrychange", (event) => {
const { x, y, width, height } = event.target.boundingRect;
});
}
Thông số kỹ thuật
| Specification |
|---|
| VirtualKeyboard API # the-virtualkeyboard-interface |