# Keypress

### What?

Bind an event to a particular keypress

ui-keypress Hit [Enter]. The $event here is different from keypress, but fires earlier.

ui-keydown Hit [Enter] or [Alt]+[Space] and remember that this normally adds a new line if we don't $event.preventDefault()

ui-keyup Hit [Enter]. Remember not to close the alert using [Enter] or it will refire keyup.

Click inside this div and hit [Enter]. You can make any element accept keyboard event by adding tabindex="0" attribute to the element.

### Why?

Cuz you feel like it? Maybe I should stop doing the 'Why' sections, running out of explanations...

### How?

The directive takes a hash (object) with the key code as the key and the callback function to fire as the value. The callback function takes an 'event' param

Note that 13 represents the `RETURN` key code.

    <textarea
            ui-keypress="{13:'keypressCallback($event)'}">
    </textarea>
    <textarea
            ui-keydown="{'enter alt-space':'keypressCallback($event)'}">
    </textarea>
    <textarea
            ui-keyup="{'enter':'keypressCallback($event)'}">
    </textarea>
    <div tabindex="0"
        ui-keyup="{'enter':'keypressCallback($event)'}">
    </div>

    <script>
        $scope.keypressCallback = function($event) {
            alert('Voila!');
            $event.preventDefault();
        };
    </script>