We need a gs-keyboard element

[michaeltocci]

We keep building custom keyboards for people who are using a mobile platform with a barcode scanner. When you have a barcode scanner attached, the built-in keyboard stops appearing.

There would be two elements: the gs-keyboard and the gs-key. The keyboard gs-keyboard will listen for clicks on it's child gs-key elements. What this does is allow us to define the structure and placing of the keys within the keyboard, but we don't have to do any javascript.

The gs-keyboard will update the document.activeElement, which is the currently focused element. gs-keyboard is going to have to trigger key events on the element whose value it updates.

Numpad example code:

<gs-keyboard>
    <table>
        <tr>
            <td><gs-key key="7">7</gs-key></td>
            <td><gs-key key="8">8</gs-key></td>
            <td><gs-key key="9">9</gs-key></td>
        </tr>
        <tr>
            <td><gs-key key="4">4</gs-key></td>
            <td><gs-key key="5">5</gs-key></td>
            <td><gs-key key="6">6</gs-key></td>
        </tr>
        <tr>
            <td><gs-key key="1">1</gs-key></td>
            <td><gs-key key="2">2</gs-key></td>
            <td><gs-key key="3">3</gs-key></td>
        </tr>
        <tr>
            <td><gs-key key="0">0</gs-key></td>
            <td colspan="2"><gs-key key="backspace">Delete</gs-key></td>
        </tr>
</gs-keyboard>

A few features:

• We'll have a format attribute for the gs-keyboard, which will just be a shortcut for some standard keyboards (numpad, qwerty, arrows, qwerty,arrows,numpad).
• If a gs-key doesn't have a key attribute defined, we'll just use the text of the key.
• You'll be able to force a target for the keyboard by using a selector in a target attribute on the gs-keyboard.

A few special keys:

• backspace will delete the character behind the cursor.
• delete/del will delete the character in front of the cursor.
• left-arrow
• right-arrow
• down-arrow
• up-arrow
• home will move the cursor to the beginning of the line (moves to the very beginning if you're already at the start of a line).
• end will move the cursor to the end of the line (moves to the very end if you're already at the end of a line).
• next-control will move the focus. Usually called tab on your keyboard.
• previous-control will move the focus. Usually shift-tab on your keyboard.
• tab will add a tab character.
• tab-spaces will add up to four spaces (depending on how far you're from a position that's divisible by four on the line).

A few of things to figure out:

• How are we going to handle a shift, control, option and command keys?
• What's the styling going to be?

[justintocci]

[Shift] should be implemented, but the other modifier keys should not be implemented and should never be shown. You could spend a lot of time implementing crazy stuff like [ctrl]-[c], but I advise against it. An entry keyboard is not an operating system keyboard and does not need the same features. If someone has a physical keyboard, they won't see this keyboard, so you don't need these keys.

Think strictly about implementing the [shift] key as it works on other platforms and don't worry about anything else.

Regarding styling, keep it plain so people can set their own CSS without trouble.

[justintocci]

Regarding special keys: backspace is typically provided delete is typically not provided but i'm not against it. arrow keys are not necessary. no mobile platform supplies these because they have touch. home-end are not necessary, mobile platforms have touch. tab is not necessary, touch tab-spaces... i don't think you need it but if you make gs-key allow for input of an arbitrary string and not just one letter then anyone can do stuff like this. It's possible someone may use it.

[crosstocci]

This element has been added and documented.