igorescobar / jQuery-Mask-Plugin

A jQuery Plugin to make masks on form fields and HTML elements.
http://igorescobar.github.io/jQuery-Mask-Plugin/
Other
4.77k stars 1.42k forks source link

How to force an input to upper case .... #448

Open Heirema opened 8 years ago

Heirema commented 8 years ago

Not really an issue, but an enhancement proposal. Let say you set this as translation :+1:

    $.jMaskGlobals = {
        translation: {
            '2': {pattern: /[A-Z]/, optional: true, uppercase : true},
            '3': {pattern: /[A-Z]/, uppercase : true},
            '4': {pattern: /[0-9]/, optional: true},
            '5': {pattern: /[0-9]/},
            '6': {pattern: /[A-Z0-9]/, uppercase : true},
            '7': {pattern: /[A-Z0-9]/, optional: true, uppercase : true},
        }
    };

Where a new pattern option is available : uppercase

This changement then in 'behaviour' :

                while (check()) {
                    var maskDigit = mask.charAt(m),
                        valDigit = value.charAt(v),
                        translation = jMask.translation[maskDigit];
                        if (translation) {
                             if (valDigit.match(translation.pattern) || (translation.uppercase &&  valDigit.toUpperCase().match(translation.pattern))) {
                                       if (translation.uppercase) {
                                              buf[addMethod](valDigit.toUpperCase());   
                                       } else {
                                              buf[addMethod](valDigit);
                                       }
                            if (translation.recursive) {
                                if (resetPos === -1) {
                                    resetPos = m;
                                } else if (m === lastMaskChar) {
                                    m = resetPos - offset;
                                }

                                if (lastMaskChar === resetPos) {
                                    m -= offset;
                                }
                            }
                            m += offset;
                      } else if ... etc

allow users to not care about cap lock status :wink: Very usefull for fast and "blind entry" ...

igorescobar commented 8 years ago

Just use CSS to do so :)

Heirema commented 8 years ago

The "text-transform:uppercase" is applied to the whole input an not a part of the entry :)

igorescobar commented 8 years ago

@Heirema what you asked gives me an idea... I'm trying to think generic here... what if you could pass a callback function to this?

Like..

$.jMaskGlobals = {
  translation: {
    '2': {
      pattern: /[A-Z]/, 
      optional: true, 
      transform: function(d) { 
        return d.toUpperCase(); 
      }
    },
  }
};
Heirema commented 8 years ago

Wow !! Would be really better than my way to do for sure. Because it would allow much more possibilities .... Not just for an uppercase I mean :)

timtribers commented 7 years ago

Did the transform proposal get implemented? I can't see that it did, and am wondering why this issue is closed.

jotapepinheiro commented 6 years ago
$('.campo_codver').mask('SSSS.SSSS.SSSS', {
    'translation': {
        S: {pattern: /[A-Za-z0-9]/}
    },
    onKeyPress: function (value, event) {
     event.currentTarget.value = value.toUpperCase();
    }
});
EToniolo commented 5 years ago

@Heirema what you asked gives me an idea... I'm trying to think generic here... what if you could pass a callback function to this?

Like..

$.jMaskGlobals = {
  translation: {
    '2': {
      pattern: /[A-Z]/, 
      optional: true, 
      transform: function(d) { 
        return d.toUpperCase(); 
      }
    },
  }
};

Hi! Great idea but isn't implemented at this time :disappointed: but is what I need and I try to suggest this simple solution:

              while (check()) {
                    var maskDigit = mask.charAt(m),
                    valDigit = value.charAt(v),
                    translation = jMask.translation[maskDigit];

                    if (translation) {
                        // ++ EMA
                        if (translation.transform != undefined){
                            valDigit = translation.transform(valDigit);
                        }
                        // -- EMA

                        if (valDigit.match(translation.pattern)) {
                            buf[addMethod](valDigit);
                             if (translation.recursive) {

Just only my two cents :smirk:

igorescobar commented 5 years ago

@EToniolo Let's try to make this a Pull Request :) Add the code, write some unit tests for it. I can help ;)

EToniolo commented 5 years ago

@EToniolo Let's try to make this a Pull Request :) Add the code, write some unit tests for it. I can help @igorescobar I'm happy to contribute but, I have no idea how to do it. I can't create a Pull Request, what I do wrong?

igorescobar commented 5 years ago

@EToniolo these links might be useful: https://github.com/igorescobar/jQuery-Mask-Plugin#unit-tests https://help.github.com/en/articles/creating-a-pull-request

Cauton commented 5 years ago

Found this and after some trial and error I found an easy way around for one-stop solution;

                if (translation) {

                    if (!valDigit.match(translation.pattern)) { // If it does not match the mask, try force it to uppercase
                        valDigit = valDigit.toUpperCase();
                    }

                    if (valDigit.match(translation.pattern)) {
caioagiani commented 2 years ago

https://developer.mozilla.org/pt-BR/docs/Web/CSS/text-transform