-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
73 lines (52 loc) · 2.7 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
---
title: "VirtualKeyboard: show() method"
short-title: show()
slug: Web/API/VirtualKeyboard/show
page-type: web-api-instance-method
status:
- experimental
browser-compat: api.VirtualKeyboard.show
---
{{APIRef("VirtualKeyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
The **`show()`** method of the {{domxref("VirtualKeyboard")}} interface programmatically shows the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic, especially when using the `virtualkeyboardpolicy` attribute on `contenteditable` elements as explained in [Control the virtual keyboard on `contenteditable` elements](/en-US/docs/Web/API/VirtualKeyboard_API#control_the_virtual_keyboard_on_contenteditable_elements).
This method only works if the currently-focused element is a form control — such as an {{htmlelement("input")}} or {{htmlelement("textarea")}} element — or if the focused element is [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable), and the currently-focused element's [`virtualKeyboardPolicy`](/en-US/docs/Web/HTML/Global_attributes/virtualkeyboardpolicy) attribute is set to `manual` and [`inputmode`](/en-US/docs/Web/HTML/Global_attributes/inputmode) isn't set to `none`.
The `show()` method always returns `undefined` and triggers a {{domxref("VirtualKeyboard.geometrychange_event", "geometrychange")}} event.
## Syntax
```js-nolint
show()
```
### Parameters
None.
### Return value
Undefined.
## Example
The code snippet below shows how to use the `virtualkeyboardpolicy` attribute to prevent the browser from showing the virtual keyboard on click or tap. The code also uses the `navigator.virtualKeyboard.show()` and `navigator.virtualKeyboard.hide()` methods to show and hide the virtual keyboard when a button is clicked:
```js
<div contenteditable virtualkeyboardpolicy="manual" id="editor"></div>
<button id="edit-button">Edit</button>
<script>
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;
});
}
</script>
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{domxref("VirtualKeyboard_API", "The VirtualKeyboard API", "", "nocode")}}
- [Full control with the VirtualKeyboard API](https://developer.chrome.com/docs/web-platform/virtual-keyboard/)