A script that enables a DIV to handle input / output.

Example of a simple command line client that can handle cls, ls, rm and vi commands. The vi command takes you to a text editor (use CTRL + S to save the file and CTRL + Q to cancel editing of the file). The files are saved into the localStorage.

Enable javascript to see this demo.


First create a Terminal. This is a IO handling area, so basically reacts to input (characters, ARROW, DEL, BACKSPACE).

var terminal = new Terminal(document.getElementById("ter"));

This terminal can be set into a specific mode. Currently there is a CommandLine and Vi mode available, but you can add your own.

Command line mode

Terminal.setCommandLineMode(terminal, {
  "callback" : function(cmdLine, waitForInputCallback) {
    // Here you can have your own callback handling, like AJAX requests.
    // The "this" points to the terminal instance.
    this.setOutput("Your fulle command was: " + cmdLine]);
    // Do cmdLine.split(" ") to get the different arguments as an array.
    // Always call the waitForInputCallback after the action is ended,
    // so the terminal can handle new input.

Reacting to keystrokes

To add a callback to specific keystrokes and combinations, for example a callback that should be called after entering CTRL + S:

terminal["ctrl" + Terminal.keyCodes.S] = function() {
  if (terminal.mode === "Vi") {
    // the getLines() method is only available in Vi mode
    console.log(this.getLines()); // get content as string array