Class VirtualKeyboard

Namespace

CSharpToJavaScript.APIs.JS

Assembly

CSharpToJavaScript.dll

NOTE

Experimental

The VirtualKeyboard interface of the VirtualKeyboard API is useful on devices that have on-screen virtual keyboards, such as tablets, mobile phones, or other devices where a hardware keyboard may not be available.

[Value("VirtualKeyboard")]
public class VirtualKeyboard : EventTarget

Inheritance

object

EventTarget

VirtualKeyboard

Inherited Members

EventTarget.AddEventListener(string, Action, Union26)

EventTarget.AddEventListener(string, Action<MouseEvent>, Union26)

EventTarget.AddEventListener(string, Action<Event>, Union26)

EventTarget.RemoveEventListener(string, Action, Union27)

EventTarget.AddEventListener(string, EventListener, Union26)

EventTarget.RemoveEventListener(string, EventListener, Union27)

EventTarget.DispatchEvent(Event)

EventTarget.When(string, ObservableEventListenerOptions)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Remarks

The VirtualKeyboard interface makes it possible to opt out of the automatic way browsers handle on-screen virtual keyboards by reducing the height of the viewport to make room for the virtual keyboard. You can prevent the browser from changing the size of the viewport, detect the position and size of the virtual keyboard — adapting the layout of your web page as a follow-up — and programmatically show or hide the virtual keyboard.

You access the VirtualKeyboard interface by using VirtualKeyboard.

-{{domxref(&quot;VirtualKeyboard_API&quot;, &quot;The VirtualKeyboard API&quot;, &quot;&quot;, &quot;nocode&quot;)}}
-Full control with the VirtualKeyboard API

See also on MDN

Constructors

VirtualKeyboard()

public VirtualKeyboard()

Properties

BoundingRect

NOTE

Experimental

The boundingRect property of the VirtualKeyboard interface contains a DOMRect indicating the position and size of the on-screen virtual keyboard that overlays the web page.

[Value("boundingRect")]
public DOMRect BoundingRect { get; }

Property Value

DOMRect

A DOMRect which indicates the position and size of the virtual keyboard in the viewport.The x, y, width, and height coordinates of the rectangle are useful to reposition content in the webpage that needs to be visible even when the virtual keyboard is displayed.

Remarks

The on-screen virtual keyboard will overlay the viewport when the {{domxref(&quot;VirtualKeyboard_API&quot;, &quot;Virtual Keyboard API&quot;, &quot;&quot;, "nocode")}} is used to prevent the browser from resizing the viewport automatically. This is done by setting the OverlaysContent property to true.

-{{domxref(&quot;VirtualKeyboard_API&quot;, &quot;The VirtualKeyboard API&quot;, &quot;&quot;, &quot;nocode&quot;)}}
-Full control with the VirtualKeyboard API

See also on MDN

Ongeometrychange

[Value("ongeometrychange")]
public EventHandlerNonNull Ongeometrychange { get; set; }

Property Value

EventHandlerNonNull

OverlaysContent

NOTE

Experimental

The overlaysContent property of the VirtualKeyboard interface can be used to opt out of the automatic way in which browsers handle on-screen virtual keyboards by reducing the size of the viewport to make space for them.

[Value("overlaysContent")]
public bool OverlaysContent { get; set; }

Property Value

bool

A boolean. false by default, set it to true to opt out of the browser&apos;s automatic handling of the on-screen virtual keyboard.

Remarks

If the overlaysContent property is set to true, the browser no longer resizes the viewport when the virtual keyboard appears. The virtual keyboard instead overlays the content of the web page, and you can adapt the page layout as appropriate using the {{domxref(&quot;VirtualKeyboard_API&quot;, &quot;Virtual Keyboard API&quot;, &quot;&quot;, &quot;nocode&quot;)}} and your own custom CSS and JavaScript.

-{{domxref(&quot;VirtualKeyboard_API&quot;, &quot;The VirtualKeyboard API&quot;, &quot;&quot;, &quot;nocode&quot;)}}
-Full control with the VirtualKeyboard API

See also on MDN

Methods

Hide()

NOTE

Experimental

The hide() method of the VirtualKeyboard interface programmatically hides the on-screen virtual keyboard. This is useful when the page needs to implement its own virtual keyboard logic by using the {{domxref("VirtualKeyboard_API", "VirtualKeyboard API", &quot;&quot;, &quot;nocode&quot;)}}.

[Value("hide")]
public GlobalObject.Undefined Hide()

Returns

GlobalObject.Undefined

Undefined.

Remarks

This method only works if the currently-focused element&apos;s virtualKeyboardPolicy attribute is set to manual and inputmode isn&apos;t set to none.

The hide() method always returns undefined and triggers a VirtualKeyboard.Geometrychange event.

-{{domxref(&quot;VirtualKeyboard_API&quot;, &quot;The VirtualKeyboard API&quot;, &quot;&quot;, &quot;nocode&quot;)}}
-Full control with the VirtualKeyboard API

See also on MDN

Show()

NOTE

Experimental

The show() method of the 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.

[Value("show")]
public GlobalObject.Undefined Show()

Returns

GlobalObject.Undefined

Undefined.

Remarks

This method only works if the currently-focused element is a form control — such as an input or textarea element — or if the focused element is contenteditable, and the currently-focused element&apos;s virtualKeyboardPolicy attribute is set to manual and inputmode isn&apos;t set to none.

The show() method always returns undefined and triggers a VirtualKeyboard.Geometrychange event.

-{{domxref(&quot;VirtualKeyboard_API&quot;, &quot;The VirtualKeyboard API&quot;, &quot;&quot;, &quot;nocode&quot;)}}
-Full control with the VirtualKeyboard API

See also on MDN