jQuery-Mask-Plugin icon indicating copy to clipboard operation
jQuery-Mask-Plugin copied to clipboard

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

Open Heirema opened this issue 9 years ago • 12 comments

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" ...

Heirema avatar Aug 19 '16 21:08 Heirema

Just use CSS to do so :)

igorescobar avatar Oct 12 '16 14:10 igorescobar

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

Heirema avatar Oct 12 '16 14:10 Heirema

@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(); 
      }
    },
  }
};

igorescobar avatar Oct 12 '16 15:10 igorescobar

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 :)

Heirema avatar Oct 12 '16 15:10 Heirema

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

timtribers avatar Apr 21 '17 11:04 timtribers

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

jotapepinheiro avatar Nov 22 '17 16:11 jotapepinheiro

@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:

EToniolo avatar Mar 20 '19 09:03 EToniolo

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

igorescobar avatar Mar 20 '19 09:03 igorescobar

@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?

EToniolo avatar Mar 20 '19 14:03 EToniolo

@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

igorescobar avatar Mar 20 '19 16:03 igorescobar

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)) {

Cauton avatar Sep 05 '19 09:09 Cauton

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

caioagiani avatar Feb 02 '22 16:02 caioagiani