HTML virtualkeyboardpolicy Attribute

HTML virtualkeyboardpolicy Attribute

The HTML virtualkeyboardpolicy attribute controls whether an on-screen virtual keyboard is automatically shown when editable content receives focus. It is intended for devices such as phones and tablets where text may be entered without a physical keyboard.

Elements That Use the virtualkeyboardpolicy Attribute

The virtualkeyboardpolicy attribute is defined for HTML elements and affects elements whose content is editable. This includes form controls such as <input> and <textarea>, as well as elements made editable with the contenteditable attribute.

virtualkeyboardpolicy Attribute Value

The virtualkeyboardpolicy attribute is an enumerated attribute with two primary values: auto and manual.

An empty value, such as virtualkeyboardpolicy="", represents the auto state.

The auto Value

The auto value allows the browser to use its normal behavior for displaying the on-screen keyboard. On a supporting device, focusing or tapping editable content can automatically display the virtual keyboard.

<div contenteditable="true" virtualkeyboardpolicy="auto">
  Edit this text.
</div>

For ordinary editable content, automatic keyboard behavior is usually the expected choice.

The manual Value

The manual value prevents focusing or tapping the editable element from automatically controlling the virtual keyboard. This allows a web application to manage the keyboard separately when the supporting VirtualKeyboard API is available.

<div contenteditable="true" virtualkeyboardpolicy="manual">
  Edit this text.
</div>

The manual value is intended for interfaces that need custom control over when the virtual keyboard appears or disappears. Simply adding virtualkeyboardpolicy="manual" does not provide controls for showing or hiding the keyboard; that behavior requires scripting and browser support for the VirtualKeyboard API.

Using virtualkeyboardpolicy with Editable Content

The attribute is useful when an element can accept text input. An ordinary element can be made editable with the contenteditable attribute.

<div contenteditable="true" virtualkeyboardpolicy="auto">
  Tap here to edit this content.
</div>

The attribute does not make an element editable by itself. The element must already be a form control that accepts text input or otherwise have editable content, such as an element using contenteditable.

virtualkeyboardpolicy and inputmode

The virtualkeyboardpolicy and inputmode attributes affect different aspects of virtual keyboard behavior. The virtualkeyboardpolicy attribute controls whether focusing editable content automatically affects the virtual keyboard, while inputmode provides a hint about the type of keyboard that should be displayed.

<div contenteditable="true"
     virtualkeyboardpolicy="auto"
     inputmode="numeric">
  Enter a number
</div>

In this example, virtualkeyboardpolicy="auto" allows automatic keyboard behavior, while inputmode="numeric" suggests a keyboard optimized for numeric input.

Common Mistakes

Do not treat virtualkeyboardpolicy as a boolean attribute. Use a defined value such as auto or manual.

Do not assume the attribute makes an element editable. Use an appropriate form control or the contenteditable attribute when the element's content needs to be edited.

Do not confuse virtualkeyboardpolicy with inputmode. The first controls automatic virtual keyboard behavior, while the second provides a hint about the keyboard layout appropriate for the expected input.

Do not rely on virtualkeyboardpolicy="manual" without considering browser support. The attribute and the VirtualKeyboard API are not supported consistently across current core browsers.

Browser Support

Baseline: Limited availability indicates that a feature is not yet available in all core browsers. Use these features with caution because they may only work in select browsers, so additional compatibility checks may be needed before general use.

The virtualkeyboardpolicy global attribute has limited availability and should not be relied on as the only way to provide essential keyboard or editing functionality.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the virtualkeyboardpolicy Attribute

The example provides two editable areas: one using auto and another using manual. On a device and browser that supports the attribute, tapping each area can demonstrate the difference in automatic virtual keyboard behavior.

Summary

The HTML virtualkeyboardpolicy attribute controls how focusing or tapping editable content affects the on-screen virtual keyboard. The auto value allows normal automatic keyboard behavior, while manual separates focus from automatic keyboard display so supporting applications can manage the keyboard themselves. Because the feature is experimental and has limited browser support, it should be used with appropriate compatibility checks.