jQuery UI - 用于输入十六进制数字的插件？

Question

在最近的一个项目中，我需要在HTML表单中将十六进制掩码（0x0 - 0xFF）作为其中一个输入字段。我知道我可以使用常规输入来获取十六进制值，然后我可以验证它以及其他表单提交验证。

然而，对于我使用ui.spinner.js (github)的一些其他十进制字段，以允许用户按上/下按钮切换数字值。有一个类似的控件用于输入十六进制值会很好。或者至少，一个比简单的输入元素更加“丰富”的控件。

有人知道这样的插件是否存在吗？

先行致谢。 更新 我忽略了我正在使用的微调控件。对此混淆我深感抱歉。

- Justin Ethier

Answer 1

我从未见过这样的东西。但是让旋转器显示十六进制应该不难 - 可以使用带有0x00-0xFF值的选择框，或者在spin()事件中使用常规旋转器从0-256并将其转换为十六进制。

- Quasipickle

Answer 2

我认为您可能仍然可以使用jQuery UI Spinner来完成此操作。 我没有测试过任何内容，但我会考虑两个可能的选项。

1. 通过JavaScript创建UL，其中其LI是0x00-0xff的列表。 然后，使用 $（“＃your_ul_id”）.spinner（）;

2. 尝试使用旋转事件处理程序通过转换为适当的十六进制来更改输出。

- sberry

Answer 3

我最近也有同样的需求，于是我编写了以下插件来解决它：https://github.com/bubasti/jQuery-Hex-Input 它使用了jQuery小部件工厂，并利用了jQuery 1.9微调器小部件。

- F. Hurgle

---

非常感谢！！！这里的OP解决方案完全失败了（似乎像“格式”、“解析”和“前缀”这样的选项不再存在），而这看起来非常有前途。只是，是否可能使展开/折叠条目方法可选（我只想使用微调器）？关于微调器内按键验证，我该如何处理？ - Karl Knechtel

经过进一步调查，我发现这并不符合我的需求。使“在spin()事件中转换为十六进制”的逻辑工作的主要部分是Spinner已经在内部预解析了显示值，如果你有一个0x前缀，那么这很好，但否则会出现问题（因为+用于强制转换值）。现在，我正在根据http://benknowscode.wordpress.com/2012/10/18/exploring-the-new-jquery-ui-spinner-beyond-the-basics/中的调查结果开发自己的解决方案，并希望最终能够拥有一个漂亮且通用的解决方案。 - Karl Knechtel

Answer 4

最终通过编写自定义的format和parse处理程序，并覆盖keypress事件以启用用户输入十六进制数字来解决了这个问题。

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

- Justin Ethier