In addition to mouse events, keyboard events can also be scripted. Combining keyboard events scripting with the ability to manipulate text elements, SVG creators can develop dynamic interactions.

In the example below, click your mouse on the SVG image, and begin typing.

As in the previous lesson, the script here uses event handlers associated with SVG elements. Here, we use the keypress event and we define the function key_press to handle it:

function key_press (event)
{
  // Get the character-code of the key that was pressed.
  var key = event.getCharCode();

  // Get string equivalent of input character-code.
  var input_text = String.fromCharCode(key);

  // Determine which SVG text element to use for
  // showing the entered key.
  var elem_idx = next_letter + 1;
  var elem_name = 'letter' + elem_idx;
  var svgobj = svgdoc.getElementById(elem_name);
  var svgstyle = svgobj.getStyle();

  // To change the element's text, we set the data
  // of its first child node.
  svgobj.getFirstChild().setData (input_text);

  ...
}

The body of the key_press function uses techniques already discussed in the lessons for text and animation. For each key pressed, it sets the Data of one of the text elements inside the SVG image and then triggers an animation sequence to make the text element gradually fade into the background.

Next lesson: Dynamic insertion