Question

On a recent project, I need have a hex mask (0x0 – 0xFF) as one of the input fields on an HTML form. I know I could just use a regular input to get the hex value, and then I can validate it along with the other form submission validation.

However, for some of the other decimal fields I am using ui.spinner.js (github) to allow the user to hit the up/down buttons to toggle the value of the number. It would be nice to have a similar control for inputting hex values. Or at least, a control that is a bit “richer” than a simple input element.

Does anyone know if such a plugin exists?

Thanks in advance.

Update

I neglected to mention the spinner control that I am using. My apologies for the confusion.

Answer 1

Ended up solving this by writing custom format and parse handlers, as well as overriding the keypress event to enalble the user to type in hex digits:

        // Functions for dealing with hex values in spinners
        var parseHex = function(val) {
                    var options = this;

                    if (options.group == '.')
                        val = val.replace('.', '');
                    if (options.point != '.')
                        val = val.replace(options.point, '.');
                    return parseFloat(parseInt(val, 16));
                },
            formatHex = function(num, places) {
                    var options = this,
                    regex = /(\d+)(\d{3})/,
                    result = ((isNaN(num) ? 0 : Math.abs(num)).toFixed(places)) + '';

                    for (result = result.replace('.', options.point); regex.test(result) && options.group; result=result.replace(regex, '$1'+options.group+'$2')) {};
                    return (num < 0 ? '-' : '') + options.prefix + parseInt(result).toString(16) + options.suffix;
                },
             keypressHex = function(e) {
                var ch = String.fromCharCode(e.charCode || e.keyCode)
                if (((ch >= '0') && (ch <= '9')) || ((ch >= 'a') && (ch <= 'f')))
                    return true;
                return false;
             };

        jQuery('#myinput')
            .spinner({
                min: 0,
                max: 255,
                prefix: '0x',
                format: formatHex,
                parse: parseHex});
        jQuery('#myinput').unbind('keypress.uispinner'); // Explicitly remove the controls keypress validation
        jQuery('#myinput').bind('keypress.uispinner', keypressHex);