InputTextMask plugin for Textfield

[zaunaf]

Amazing plugin ! It would be great if this also supports currency. I've tried with mask like 9,999,999 gives strange results such as 2,050,0__. I've searched the net, and found this : http://www.fci.com.br/maskedit/MaskEdit/MaskEdit.aspx , it's good idea that the field inserts the value starting from right for currency/money type of field. I'd be glad to change the code myself but if anyone could point me where to begin with.. Thanks !!

[dandfra]

Here I write a version of the function with comment:

injectValue : function(keycode, cursorPosition) {
       //if it's not delete and the value typed is the same that there was before
        if (!keycode.isDelete && keycode.unicode == cursorPosition.previousValue.charCodeAt(cursorPosition.start))
            return true;
        var key;
        if(!keycode.isDelete && !keycode.isBackspace){
            //if it's not delete or backspace, get the validated key. null means that it's not valid.
            key=this.getValidatedKey(keycode, cursorPosition);
        } else {
            //backspace and delete management
            if(cursorPosition.start == cursorPosition.end){
                key='_';
                if(keycode.isBackspace){
                    cursorPosition.dec();
                }
            } else {
                key=this.viewMask.substring(cursorPosition.start,cursorPosition.end);
            }
        }
        if(key){//if the typed value is valid, change the value in the input text. cursorPosition.start is the actual position of the cursor. Here you should probably do your work... 
            this.inputTextElement.value = cursorPosition.previousValue.substring(0,cursorPosition.start)
                + key +
                cursorPosition.previousValue.substring(cursorPosition.start + key.length,cursorPosition.previousValue.length);
            return true;
        }
        return false;
    } 

[zaunaf]

Great !!
I'll have a look and hopefully soon post something useful here ..

Thanks!!

[zaunaf]

This is the best I can come up so far (i simply replaced the code to ease trial & error):

...
        if(key){ 
            //zaunaf adds            
            var resultText = cursorPosition.previousValue.substring(0, cursorPosition.previousValue.length - cursorPosition.start - key.length) +
                 cursorPosition.previousValue.substring(cursorPosition.previousValue.length - cursorPosition.start, cursorPosition.previousValue.length) +
                 + key;
                 
            var j=0;
            
            for (i=0; i < cursorPosition.previousValue.length-1; i++) {
                if (this.viewMask[i] == this.specialChars[j]) {                   
                   if (this.viewMask[i] != resultText[i]) {                      
                      resultArray = resultText.split("");
                      resultArray[i-1] = resultArray[i];
                      resultArray[i] = this.viewMask[i];
                      resultText = resultArray.join("");                      
                   }
                   j++;
                }
            }
            this.inputTextElement.value = resultText;
                        
            //this.inputTextElement.value = cursorPosition.previousValue.substring(0,cursorPosition.start)
            //    + key +
            //    cursorPosition.previousValue.substring(cursorPosition.start + key.length,cursorPosition.previousValue.length);

            return true;
        }
        return false;
... 

I used this to call :

...
plugins: [new Ext.ux.InputTextMask('999.999.999.999',false)],
... 

I preserve the code logic having the cursor position begins to input from left, but it seems that after the cursor "collide" with the number, the field refuses to accept further entry (I tried 1.200.000.000, but it stuck in ___.__1.200.000) . Backspace is also screwed up.

Is it possible to have right-to-left logic on this plugin? I've read trough the code, I'm afraid there'll be too much thing to adjust. IMHO the plugin is too left-to-right oriented.

[dandfra]

Yes, the logic to move the cursor is a bit scattered.

• some bits are in managePaste (for copy & paster management, here it moves to the left, look at the line this.oldCursorPos.start=this.oldCursorPos.start+1; I don't know if the logic should be reversed here
• a little bit in injectValue to move the cursor back after a backspace,

  if(keycode.isBackspace){
    cursorPosition.dec();
  }

• something in skipMaskCharacters (to skip the mask character)

You have to change in this places to manage your case remembering that when you type the cursor normally moves to the right, and so you have probably to move it back to the left

[zaunaf]

To avoid conflict with existing logic, I prefer to only re arrange output just before it was spit out, and then correct the output should any character collide with the skipCharacters.

• some bits are in managePaste (for copy & paster management, here it moves to the left, look at the line this.oldCursorPos.start=this.oldCursorPos.start+1; I don't know if the logic should be reversed here

I don't believe this is a problem, because my code keeps inputting behaviour left to right. I've tried pasting, work nicely - only constrained by the collision

• a little bit in injectValue to move the cursor back after a backspace,

  if(keycode.isBackspace){
    cursorPosition.dec();
  }

Ok. I'll have a look to fix the backspace mess

• something in skipMaskCharacters (to skip the mask character)

You have to change in this places to manage your case remembering that when you type the cursor normally moves to the right, and so you have probably to move it back to the left

Yes, I've already seen this method. I don't alter anything here, because it isn't necessary -- yet. As long as the format is reversably equal (i.e 999.999, not 9.999.999). But if we also want to do this, we have to change something here, i.e read the mask backward.. Consequently we have to alter the whole logic ..

The problem so far is the "collision". I suspect that the plugin reads the previous number, not the mask. So when it "collides" (i.e the cursor went to the position where the number already filled, no longer a mask "_"). I wonder where could this logic be placed..

Thanks for helping !

Regards, Z

[gsans]

Hi there,
just to make the following issues public.

Paste feature. You can paste data into the masked field after selecting the whole empty mask. In this case mask is not being applied.

Special characters after selecting. When selecting the whole empty mask and typing any of the following characters, those are not filtered by the defined mask: ' (single quote), # (hash), t (letter t).

Cheers,
Gerard.

[philrl9]

Can you please tell me where I can get the lastest version of the plugin?

Thanks!

[carpmike]

I have data that is valid but doesn't use the entire mask. As an example, I set a mask of '(999) 999-9999 x99999' for a US phone number. It is valid for there to be no extension or a partial extension (less than 5 digits). When I call setValue on the TextField the entire mask is not applied to the field unless the data uses the entire mask. E.g.

(123) 456-7890 x12

shows as

(123) 456-7890 x12

but I expected

(123) 456-7890 x12___

In fact, I can't enter more text on the end of the string because the full mask isn't there.

I have hacked a solution for this (making use of the bulk of the managePaste method) but I'm curious whether the authors think this should be supported and if so what the cleanest solution would be.

Thanks,

mike

[dandfra]

I see on the forum that there are a lot of different neds regarding a plugin that masks the input (right to left input for numbers, mask with variable length and so on). I think that the better solution is to separate the logic to manage the input, tfrom he logic to process the input, to let the developer to easylly add his implementation...
The problem is that I', very very busy ATM, and so I don't know when I will have time

Ciao