It can be useful to track the state of the on-screen keyboard to be able to dynamically adjust the web-based UI and offer an immersive app-like experience for users.

Note that functions can be defined within Custom JavaScript rather than your web page itself if this is more convenient.

👍

Developer Demo

Display our demo page in your app to test during development https://median.dev/keyboard/

JavaScript Bridge Functions

Get current keyboard state

Retrieve the state of the keyboard. Provide a callback function or otherwise a promise is returned.

↔️Median JavaScript Bridge

Javascript

median.keyboard.info({'callback': function});
// Return value:
{
  'visible': BOOL, 
  'keyboardWindowSize': { 
    'width': INT, 
    'height': INT 
  }, 
  'visibleWindowSize': { 
    'width': INT, 
    'height': INT
  }
}

Listen to keyboard state changes

Define a function that is called automatically whenever the state of the keyboard changes.

↔️Median JavaScript Bridge

Javascript

median.keyboard.listen(function); 
// Pass an empty string to clear the function and stop listening

// Return value:
{
  'visible': BOOL, 
  'keyboardWindowSize': { 
    'width': INT, 
    'height': INT 
  }, 
  'visibleWindowSize': { 
    'width': INT, 
    'height': INT
  }
}

Set Accessory View (iOS Only)

On iOS the keyboard may include an accessory view with spell check and other helper functionality. This toolbar may be disabled if required.

↔️Median JavaScript Bridge

Javascript

median.keyboard.showAccessoryView(BOOL);