Keyboard Interaction

onKeyboardToggle Function

This function detects changes in the dimensions of the visual viewport, typically occurring when the virtual keyboard is opened or closed on mobile devices. It registers an event listener for the resize event on the visualViewport object.

• Parameters:

  • iframeId: The ID of the iframe element containing the editor.

  • targetUrl: The URL of the target iframe.

  • defaultKeyboardSize: (Optional) The default height of the keyboard. If not provided, a default minimum height of 300 pixels is used.

• Functionality:

  • Retrieves the iframe element based on the provided iframeId.

  • Listens for changes in the dimensions of the visual viewport using the resize event.

  • Determines whether the keyboard is open or closed by comparing the screen height with the visual viewport height.

  • Constructs a message object containing information about the action (keyboard open or closed) and the dimensions of the visual viewport.

  • Sends the constructed message to the target iframe using XD.postMessage.

XD.postMessage Function

This function sends messages to the target iframe using the window.postMessage method if supported by the browser, or through a hash fragment if not.

• Parameters:

  • message: The message to be sent.

  • target_url: The URL of the target iframe.

  • target: (Optional) The target window for the message. Defaults to the parent window.

• Functionality:

  • If the target_url is provided and the browser supports window.postMessage, the message is sent directly to the target iframe using window.postMessage.

  • If the browser does not support window.postMessage, the message is sent using a hash fragment in the URL of the target iframe.

Usage

To utilize the keyboard interaction functionality:

1. Call the XD.documentEvents.onKeyboardToggle function, passing the ID of the iframe containing the editor and the target URL.

2. The function will automatically detect changes in the visual viewport dimensions and send messages to the target iframe indicating whether the keyboard is open or closed.

This functionality is useful for applications that require responsive handling of keyboard events, particularly in scenarios where user input is expected within an iframe, such as text input fields within an embedded editor.