System Keyboard in WebXR

• Each time the keyboard is shown represents a new underlying editing session. Any key press first overwrites the entire existing value in the text element.
• The only mechanism for reading keyboard input and interaction is through the text field’s value. At this time, there are no explicit system keyboard key-press events to be intercepted.
• Also consider that for the text field to receive keyboard input, it must be added to the underlying DOM. When appended to an off-screen location, like outside the underlying viewport, the web page scrolls to the text field when the user types. After exiting the immersive session, the page viewport’s contents might be different from what it was when the immersive session was entered.

if (session.isSystemKeyboardSupported) {
  // ...
}

let myTextField = null; // keep a global reference to read text later

myTextField = document.createElement("input");
myTextField.type = "text";
document.body.appendChild(myTextField);

myTextField.focus();

var textFromUser = myTextField.value;

myTextField.oninput = function() {
  // ...
};

session.addEventListener('visibilitychange', function(ev) {
  if (ev.session.visibilityState === 'visible-blurred') {
    // ...
  }
});

• The “hide/dismiss keyboard” button on the keyboard is clicked.
• The Done key on the keyboard is clicked.
• The Meta Quest button on the controller is pressed.
• The user clicks outside of the keyboard bounds.

1. The text field will be blurred.

   myTextField.onblur = function() {
     // ...
   };
   
2. When visibility returns to the session, XRSession visibility state changes to visible.

   session.addEventListener('visibilitychange', function(ev) {
     if (ev.session.visibilityState === 'visible') {
    // ...
     }
   });
   

function onSessionEnded(event) {
  textField.remove();
}