Custom layout with "made up" keys not displaying correctly

[LiamFry]

I have no idea what you call a custom key label that you place between { and } ...

My HTML element: <input id="item-quantity" class="shorter nudge-up" type="text" val="" size="8" readonly/>

My Virtual Keyboard code:

$("#item-quantity").keyboard(
    {
        layout: "custom",
        customLayout: {
            normal: [
                "{1/8} {3/8} {5/8} {7/8}",
                "{1/4} {1/2} {3/4} ct",
                "7 8 9 oz",
                "4 5 6 lb",
                "1 2 3 g",
                "{empty} 0 {b} kg",
                "{accept} {cancel}"
            ]
        },
        display: {
            '1/8': '\u215B', // 1/8; one eighth
            '1/4': '\u00BC', // 1/4; one quarter
            '3/8': '\u215C', // 3/8; three eighths
            '1/2': '\u00BD', // 1/2; one half
            '5/8': '\u215D', // 5/8; five eighths
            '3/4': '\u00BE', // 3/4; three quarters
            '7/8': '\u215E'  // 7/8; seven eighths
        },
        usePreview: false,
    }
)
.addTyping( { showTyping: true, delay: 200 } );

When my keyboard is displayed, none of the fractionals render.

As shown in the fractional demo, I also tried $.keyboard.layouts.numpad = { ... } and using numpad as my layout. The results are the same. If I use a literal Unicode character - or its code point equivalent (\uXXXX), all is fine. I've also tried 'default' instead of normal : no difference.

.

[Mottie]

Hi @LiamFry!

It appears that the keyAction definitions for those custom buttons are missing. See https://github.com/Mottie/Keyboard/wiki/Actions

[LiamFry]

Thank you! I didn't realize I needed an keyAction handler. My custom keys (?) are now appearing. I'm using insertText() to insert the text I want. But for some reason, the keyboard is not longer "smart enough" to know that ct was entered with one key and therefore should have its two characters deleted on ⌫ My input is a bit odd (I'm using fractional weights, e.g. 3-⅜ lb) so when I rubout the 'lb' I need to go back two chars; the same for getting rid of the -⅜. So the fact that ct isn't auto-deleted on ⌫ is no biggie; I have to implement a special bksp action so as it is. I also need to implement some custom data during editing that survives callbacks and event handlers; I found that I can put a custom property into the keyboard definition object then access it in a key action handler via base.options.myObj.myProp