allow hexadecimal masks

[hoeni]

It would be great to have a placeholder for hexadecimal input, enabling input for mac addresses for example:

FF:FF:FF:FF:FF:FF

It would be helpful to normalize this to either caps (F) or normal letters (f), depending on the placeholder.

[igorescobar]

You can do it:
$('.date').mask('FF:FF:FF:FF:FF:FF', {translation: {"F":"[0-9a-z]"}});

[hoeni]

Hi Igor,

Thanks for your quick reply!

That's what I'm doing at the moment and normalizing the input on the server side afterwards. It would be a great enhancement for the user experience though, if the input of the user is normalized while he types:

Say, I want to see capital letters for my hex, and the user types 0a:0F, it should be normalized to "0A:0F" (or "0a:0f", if I want to see small caps)

Asides from using two special mask characters like f and F there could be at least a generic alternative like having an additional option e.g.

$('.date').mask('FF:FF:FF:FF:FF:FF', {
    translation: {"F":"[0-9a-z]"},
    conversion: {"ABCDEF" => "abcdef"}
});

or similar configuration.

Tobi

[igorescobar]

Hi @hoeni
Assuming that is an specific use case, I don't see why I should implement that kind of implementation on a "generic" manner, that would increase the plugin's source code on a very significant way and the value in return would be very small. Although, you can implement this behaviour for your users using callbacks that jquery mask offers.

Example:

$('.date').mask('AA:AA:AA:AA:AA:AA', {
        onKeyPress: function(str, e, obj){ 
            $(obj).val(str.toLowerCase());
        }
   }
);

Hope it helps.

[hoeni]

Hi,

that works like a charm! I wasn't aware of the keypress callback!
Thank you so much!

Tobi

[igorescobar]

No problem! Enjoy ;)

[brunowego]

My solution for hex color:

$('.hexcolor').mask('SAAAAAA', {
    'translation': {
        S: {
            pattern: /[#]/
        },
        A: {
            pattern: /[A-Fa-f0-9]/
        }
    }
});

[igorescobar]

👍