Input Handling in JavaScript

Cohtml supports all of the usual HTML5 standard input-related functionality, such as triggering hover effects, default event listeners (i.e. following links), and attaching custom event listeners through JavaScript. Note that in order to have any input in your UI, your application has to capture input events from the OS and forward them to the Cohtml library, as described here.

Attaching custom event listeners

Frontend devs can attach event listeners in script and execute logic as per the HTML5 standard:

function touchDownHandler()
{
	console.log("myElement touched!");
}

document.getElementById("myElement").addEventListener('touchstart', touchDownHandler, false);

Using event listeners the developer can implement custom logic when a certain element is touched, like implementing a game menu, where touching the “New Game” element will trigger an event in the game that will start the game world.

Dispatching events from JavaScript #

Cohtml supports the standard (yet now deprecated) API for creation and dispatching of events which lets you simulate input from JS. For example to trigger a mouse click on the body:

var eventX = 250;
var eventY = 300;
var isCtrlDown = true;
var evt = document.createEvent('MouseEvent');
evt.initMouseEvent('click', true, true, /* whether the event can bubble and can be cancelled)
    null, 0,
    eventX, eventY, eventX, eventY, /* coordinates */
    isCtrlDown, false, false, false, /* key modifiers */
    0 /* button index */, undefined);
document.body.dispatchEvent(evt);

Text selection #

Cohtml supports text selection in input fields by holding shift and moving the caret with the arrow keys and through the standard Text Control API

Cohtml also supports generic text selection through the standard Selection API The implementation is minimal, supporting only setBaseAndExtent, empty and toString. The caretPositionFromPoint function enables getting the character index at a certain page coordinates.

This is an example of a script which allows mouse selection in inputs and generic text:

// Mouse drag selection for generic text
(function() {
  // State variables
  var anchorCaretPosition = null;

  document.addEventListener('mousedown', (event) => {
    // Reset any current selection
    document.getSelection().empty();
    // Get the anchor node and offset
    if (event.button == 0 && !event.target.select && !anchorCaretPosition) {
      anchorCaretPosition = document.caretPositionFromPoint(event.x, event.y);
    }
  });

  document.addEventListener('mousemove', (event) => {
    // Get the focus node and offset and make a selection
    if ((event.buttons & 1) === 1 && !event.target.select && anchorCaretPosition) {
      var focusCaretPosition = document.caretPositionFromPoint(event.x, event.y);
      document.getSelection().setBaseAndExtent(
        anchorCaretPosition.offsetNode, anchorCaretPosition.offset,
        focusCaretPosition.offsetNode, focusCaretPosition.offset);
    }
  });

  document.addEventListener('mouseup', (event) => {
    // Reset state
    anchorCaretPosition = null;
  });
})();

Using JavaScript the selection capabilities may be extended even further to support Select All or double clicking to select a word. A copy/paste functionality is also possible to be implemented through the JS binding.