Input

The Input object allows you to use a touch-enabled keyboard to control your application. This is a new input event layer for use with touch-enabled keyboards beginning in BlackBerry 10.3. These are new keyboard events and do not represent standard DOM mouse events or HTML5 touch events on the screen.

This plugin is not currently available in BlackBerry 10 WebWorks SDK version 2.1. You can download the plugin from GitHub, or from the Cordova registry.

Installation:

To use this API in your project, add the input plugin:

webworks plugin add com.blackberry.ui.input

Applications typically should use window.addEventListener to attach an event listener after the deviceready event fires.

Example:

<script type="text/javascript">

    document.addEventListener("keyboardtouchstart", touchCallback);
    document.addEventListener("keyboardtouchmove", touchCallback);
    document.addEventListener("keyboardtouchend", touchCallback);

    function touchCallback(event) {

        if (event.type==="keyboardtouchstart")) {
            console.log('The user touched the keyboard at ' + 
                event.timeStamp + '.');
        }

        if (event.type==="keyboardtouchmove") {
            console.log('The user has moved to: X coord: ' + 
                event.x + ', Y coord: ' +  event.y);
        }

        if (event.type==="keyboardtouchend") {
            console.log('Finger lifted from keyboard at ' + 
                event.timeStamp + '.');
        }
    }
</script>

keyboardtouchstart

This event is fired by the system. If you want to listen for the event you can do so using the document.addEventListener function and remove the listener using the document.removeEventListener function. The keyboardtouchstart event is triggered when the user's finger touches the touch-enabled keyboard.

Synopsis:

Event

Parameters:

event {Object}

The event object contains the following properties for the keyboardtouchstart event.

  • x: x-axis position of the touch event {Number}
  • y: y-axis position of the touch event {Number}
  • type: "keyboardtouchstart" {String}
  • timeStamp: time stamp of the touch event {Number}

Example:

<script type="text/javascript">

    document.addEventListener("keyboardtouchstart", touchCallback);

    function touchCallback(event) {
        console.log (event);
    }

</script>

keyboardtouchmove

This event is fired by the system. If you want to listen for the event you can do so using the document.addEventListener function and remove the listener using the document.removeEventListener function. The keyboardtouchmove event is triggered when the user's finger is moved along the touch-enabled keyboard.

Synopsis:

Event

Parameters:

event {Object}

The event object contains the following properties for the keyboardtouchmove event.

  • x: x-axis position of the touch event {Number}
  • y: y-axis position of the touch event {Number}
  • type: "keyboardtouchmove" {String}
  • timeStamp: time stamp of the touch event {Number}

Example:

<script type="text/javascript">

    document.addEventListener("keyboardtouchmove", touchCallback);

    function touchCallback(event) {
        console.log (event);
    }

</script>

keyboardtouchend

This event is fired by the system. If you want to listen for the event you can do so using the document.addEventListener function and remove the listener using the document.removeEventListener function. The keyboardtouchend event is triggered when the user's finger is lifted from the touch-enabled keyboard.

Synopsis:

Event

Parameters:

event {Object}

The event object contains the following properties for the keyboardtouchend event.

  • x: x-axis position of the touch event {Number}
  • y: y-axis position of the touch event {Number}
  • type: "keyboardtouchend" {String}
  • timeStamp: time stamp of the touch event {Number}

Example:

<script type="text/javascript">

    document.addEventListener("keyboardtouchend", touchCallback);

    function touchCallback(event) {
        console.log (event);
    }

</script>

Last modified: 2014-06-24



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus