Engine API Reference - v2.12.3
    Preparing search index...

    Class Keyboard

    Manages keyboard input by tracking key states and dispatching events. Extends EventHandler in order to fire keydown and keyup events (see KeyboardEvent).

    Allows the state of individual keys to be queried to check if they are currently pressed or were pressed/released since the last update. The class automatically handles browser visibility changes and window blur events by clearing key states. The Keyboard instance must be attached to a DOM element before it can detect key events.

    Your application's Keyboard instance is managed and accessible via AppBase#keyboard.

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Methods

    attach detach fire hasEvent isPressed off on once wasPressed wasReleased

    Events

    EVENT_KEYDOWN EVENT_KEYUP

    Constructors

    • Create a new Keyboard instance.

      Parameters

      • Optionalelement: Element | Window

        Element to attach Keyboard to. Note that elements like <div> can't accept focus by default. To use keyboard events on an element like this it must have a value of 'tabindex' e.g. tabindex="0". See here for more details.

      • Optionaloptions: { preventDefault?: boolean; stopPropagation?: boolean } = {}

        Optional options object.

        • OptionalpreventDefault?: boolean

          Call preventDefault() in key event handlers. This stops the default action of the event occurring. e.g. Ctrl+T will not open a new browser tab.

        • OptionalstopPropagation?: boolean

          Call stopPropagation() in key event handlers. This stops the event bubbling up the DOM so no parent handlers will be notified of the event.

      Returns Keyboard

      // attach keyboard listeners to the window
      const keyboard = new pc.Keyboard(window);

    Methods

    • Fire an event, all additional arguments are passed on to the event listener.

      Parameters

      • name: string

        Name of event to fire.

      • Optionalarg1: any

        First argument that is passed to the event handler.

      • Optionalarg2: any

        Second argument that is passed to the event handler.

      • Optionalarg3: any

        Third argument that is passed to the event handler.

      • Optionalarg4: any

        Fourth argument that is passed to the event handler.

      • Optionalarg5: any

        Fifth argument that is passed to the event handler.

      • Optionalarg6: any

        Sixth argument that is passed to the event handler.

      • Optionalarg7: any

        Seventh argument that is passed to the event handler.

      • Optionalarg8: any

        Eighth argument that is passed to the event handler.

      Returns EventHandler

      Self for chaining.

      obj.fire('test', 'This is the message');

    • Test if there are any handlers bound to an event name.

      Parameters

      • name: string

        The name of the event to test.

      Returns boolean

      True if the object has handlers bound to the specified event name.

      obj.on('test', () => {}); // bind an event to 'test'
      obj.hasEvent('test'); // returns true
      obj.hasEvent('hello'); // returns false

    • Return true if the key is currently down.

      Parameters

      • key: number

        The keyCode of the key to test. See the KEY_* constants.

      Returns boolean

      True if the key was pressed, false if not.

    • Detach an event handler from an event. If callback is not provided then all callbacks are unbound from the event, if scope is not provided then all events with the callback will be unbound.

      Parameters

      • Optionalname: string

        Name of the event to unbind.

      • Optionalcallback: HandleEventCallback

        Function to be unbound.

      • Optionalscope: any

        Scope that was used as the this when the event is fired.

      Returns EventHandler

      Self for chaining.

      const handler = () => {};
      obj.on('test', handler);

      obj.off(); // Removes all events
      obj.off('test'); // Removes all events called 'test'
      obj.off('test', handler); // Removes all handler functions, called 'test'
      obj.off('test', handler, this); // Removes all handler functions, called 'test' with scope this

    • Attach an event handler to an event.

      Parameters

      • name: string

        Name of the event to bind the callback to.

      • callback: HandleEventCallback

        Function that is called when event is fired. Note the callback is limited to 8 arguments.

      • Optionalscope: any = ...

        Object to use as 'this' when the event is fired, defaults to current this.

      Returns EventHandle

      Can be used for removing event in the future.

      obj.on('test', (a, b) => {
          console.log(a + b);
      });
      obj.fire('test', 1, 2); // prints 3 to the console

      const evt = obj.on('test', (a, b) => {
          console.log(a + b);
      });
      // some time later
      evt.off();

    • Attach an event handler to an event. This handler will be removed after being fired once.

      Parameters

      • name: string

        Name of the event to bind the callback to.

      • callback: HandleEventCallback

        Function that is called when event is fired. Note the callback is limited to 8 arguments.

      • Optionalscope: any = ...

        Object to use as 'this' when the event is fired, defaults to current this.

      Returns EventHandle

      • can be used for removing event in the future.
      obj.once('test', (a, b) => {
          console.log(a + b);
      });
      obj.fire('test', 1, 2); // prints 3 to the console
      obj.fire('test', 1, 2); // not going to get handled

    • Returns true if the key was pressed since the last update.

      Parameters

      • key: number

        The keyCode of the key to test. See the KEY_* constants.

      Returns boolean

      True if the key was pressed.

    • Returns true if the key was released since the last update.

      Parameters

      • key: number

        The keyCode of the key to test. See the KEY_* constants.

      Returns boolean

      True if the key was pressed.

    Events

    EVENT_KEYDOWN: string = 'keydown'

    Fired when a key is pressed. The handler is passed a KeyboardEvent.

    const onKeyDown = (e) => {
        if (e.key === pc.KEY_SPACE) {
            // space key pressed
        }
        e.event.preventDefault(); // Use original browser event to prevent browser action.
    };

    app.keyboard.on('keydown', onKeyDown, this);
    EVENT_KEYUP: string = 'keyup'

    Fired when a key is released. The handler is passed a KeyboardEvent.

    const onKeyUp = (e) => {
        if (e.key === pc.KEY_SPACE) {
            // space key released
        }
        e.event.preventDefault(); // Use original browser event to prevent browser action.
    };

    app.keyboard.on('keyup', onKeyUp, this);

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Events