JQuery UI - Плагин для ввода числа в виде шестнадцатеричного?

Question

В недавнем проекте мне нужно иметь шестнадцатеричную маску (0x0 - 0xFF) в качестве одного из полей ввода в форме HTML. Я знаю, что могу просто использовать обычный ввод для получения шестнадцатеричного значения, а затем я могу проверить его вместе с другой проверкой отправки формы.

Однако для некоторых других десятичных полей я использую ui.spinner.js (github) , чтобы позволить пользователю нажимать кнопки вверх / вниз для переключения значения числа. Было бы неплохо иметь аналогичный элемент управления для ввода шестнадцатеричных значений. Или, по крайней мере, элемент управления, который немного «богаче», чем простой элемент ввода.

Кто-нибудь знает, существует ли такой плагин?

Заранее спасибо.

Обновление

Я не упомянул, что использую вращающийся элемент управления. Мои извинения за путаницу.

Answer 1

У меня недавно было такое же требование, и я написал следующий плагин для его решения: https://github.com/bubasti/jQuery-Hex-Input

Он использует фабрику виджетов jQuery и использует виджет jQuery 1.9 Spinner.

Answer 2

Я думаю вы, вероятно, все еще могли бы использовать для этого JQuery UI Spinner. Я ничего не проверял, но я бы посмотрел на два возможных варианта.

1. Создание UL через javascript с его LI в списке 0x00 - 0xff. Затем используйте $("#your_ul_id").spinner();

2. Попробуйте использовать обработчик события вращения, чтобы изменить вывод путем преобразования в соответствующий гекс.

Answer 3

Я никогда не видел ни одного. Впрочем, сделать вращение шестнадцатеричным не должно быть слишком сложно - либо сделайте поле выбора с 0x00 - 0xFF в качестве значений, либо выполните обычное вращение с 0 - 256 и преобразуйте его в hex в событии spin ().

Answer 4

Закончилось решение этой проблемы путем написания пользовательских обработчиков format и parse, а также переопределения события нажатия клавиши, чтобы пользователь мог вводить шестнадцатеричные цифры:

        // 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);