how to create decimals - 0.25, 0.5, 0.75...

[drawnword]

How would I build up special buttons, which would carry a display: 1/4, 1/2, 3/4, and then result 0.25, 0.5, 0.75 added into existing figure when keypad buttons are pressed?

[Mottie]

Hi @drawnword!

So I made this (demo). I had an extra slot, so I added another custom key to toggle adding or subtracting the fractional value.

CSS

.ui-keyboard-inv span {
    color: green;
    font-weight: bold;
    font-size: 1.2em;
}
.ui-keyboard-inv.subtract span {
    color: red;
}

Script

$.keyboard.layouts.numpad = {
    'default': [
        '{1/4} {1/2} {3/4} {inv}',
        '= ( ) {b}',
        '{clear} / * -',
        '7 8 9 +',
        '4 5 6 {sign}',
        '1 2 3 %',
        '0 {dec} {a} {c}'
    ]
}

$.extend($.keyboard.keyaction, {
    '1/4': function (kb) {
        kb.$preview.val(function(i,v){
            return (parseFloat(v) || 0) + (.25 * (kb.invert ? -1 : 1) );
        });
    },
    '1/2': function (kb) {
        kb.$preview.val(function(i,v){
            return (parseFloat(v) || 0) + (.5 * (kb.invert ? -1 : 1) );
        });
    },
    '3/4': function (kb) {
        kb.$preview.val(function(i,v){
            return (parseFloat(v) || 0) + (.75 * (kb.invert ? -1 : 1) );
        });
    },
    'inv': function (kb) {
        kb.invert = !kb.invert;
        kb.$keyboard.find('.ui-keyboard-inv').toggleClass('subtract', kb.invert);
    }
});

$('#keyboard')
    .keyboard({
        layout: 'numpad',
        usePreview: false,
        display: {
            '1/4': '\u00BC',
            '1/2': '\u00BD',
            '3/4': '\u00BE',
            'inv': '\u00B1:Add or Subtract fractions'
        }
    })
    // activate the typing extension
    .addTyping({
        showTyping: true,
        delay: 50
    });

[drawnword]

It works! Thank you very much! Exactly, what I was looking for!

[drawnword]

How about restricting the user from entering more than just once .50 or .25... so, that the keyboard would work like a calculator...? I tried the following... to detect, if a decimal already exists, it would not create the new decimal value... but it doesn't seem to work... any hints, what I am doing wrong?

      'half': function (kb) {
            var pattern = /^\d+(?:\.\d{2})?$/;
            if (pattern.test(base.$preview.val())) {
                kb.$preview.val(function (i, v) {
                    return (parseFloat(v) || 0) + (.50 * (kb.invert ? -1 : 1));
                });
            }
        },

Another issue, I've been trying to deal with is that when it produces the number .50... it leaves the zero out. -Is there a way to keep 2 decimals in view? .toFixed(2)?

[Mottie]

Ok, try this (demo):

var changeValue = function(kb, name, val){
    if (kb.$keyboard[0][name]) { return; }
    kb.$keyboard[0][name] = true;
    var result = ((parseFloat(kb.$preview.val()) || 0) +
        (val * (kb.invert ? -1 : 1))).toFixed(2);
    kb.$preview
        .val(result)
        .caret( kb.lastCaret.start, kb.lastCaret.end );
};

$.extend($.keyboard.keyaction, {
    '1/4': function (kb) {
        changeValue(kb, 'quarter', 0.25);
    },
    '1/2': function (kb) {
        changeValue(kb, 'half', 0.5);
    },
    '3/4': function (kb) {
        changeValue(kb, 'threequarter', 0.75);
    },
    'inv': function (kb) {
        kb.invert = !kb.invert;
        kb.$keyboard.find('.ui-keyboard-inv').toggleClass('subtract', kb.invert);
    }
});

This version:

• Uses kb.$keyboard[0] to save a flag indicating that the user has used the button (the keyboard gets destroyed in the latest version, so it also clears these variables). If you want, you can set it to count the number of times it was used instead of stopping after one use.
• Adds the .toFixed(2) to the result, but only after the user clicks on one of the fractional keys.
• Restores the caret position because once the value is modified, the caret would otherwise jump to the end.

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue this discussion.