VirtualKeyboard: show() method

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.

Phương thức show() của giao diện VirtualKeyboard hiển thị bàn phím ảo trên màn hình theo chương trình. Điều này hữu ích khi trang cần thực hiện logic bàn phím ảo của riêng mình, đặc biệt khi sử dụng thuộc tính virtualkeyboardpolicy trên các phần tử contenteditable như được giải thích trong Control the virtual keyboard on contenteditable elements.

Phương thức này chỉ hoạt động nếu phần tử đang được focus là điều khiển form, chẳng hạn như phần tử <input> hoặc <textarea>, hoặc nếu phần tử được focus là contenteditable, và thuộc tính virtualKeyboardPolicy của phần tử đang được focus được đặt thành manualinputmode không được đặt thành none.

Phương thức show() luôn trả về undefined và kích hoạt sự kiện geometrychange.

Cú pháp

js
show()

Tham số

Không có.

Giá trị trả về

Undefined.

Ví dụ

Đoạn code dưới đây cho thấy cách sử dụng thuộc tính virtualkeyboardpolicy để ngăn trình duyệt hiển thị bàn phím ảo khi nhấp hoặc chạm. Code cũng sử dụng các phương thức navigator.virtualKeyboard.show()navigator.virtualKeyboard.hide() để hiển thị và ẩn bàn phím ảo khi một nút được nhấp:

html
<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
<button id="edit-button">Edit</button>
js
if ("virtualKeyboard" in navigator) {
  const editor = document.getElementById("editor");
  const editButton = document.getElementById("edit-button");
  let isEditing = false;

  editButton.addEventListener("click", () => {
    if (isEditing) {
      navigator.virtualKeyboard.hide();
      editButton.textContent = "Edit";
    } else {
      editor.focus();
      navigator.virtualKeyboard.show();
      editButton.textContent = "Save changes";
    }

    isEditing = !isEditing;
  });
}

Thông số kỹ thuật

Specification
VirtualKeyboard API
# dom-virtualkeyboard-show

Tương thích trình duyệt

Xem thêm