In the previous post I explained how you can customize the behaviour of MaskedInput’s Transforms. That should probably cover all your needs. However, MaskedInput’s architecture does allow for one more way to customize transforms. You can actually build in your own.
As you can see from the MaskedInput_Transforms.js file attached in the previous post, all the built-in transforms are contained in a global JavaScript object named ComponentArt_MaskedInput_Transforms, indexed by Transform name. So building in a new Transform is as easy as adding another property to ComponentArt_MaskedInput_Transforms. You can do that in a few ways:
- You can completely redefine the object ComponentArt_MaskedInput_Transforms:
<script type="text/javascript">
window.ComponentArt_MaskedInput_Transforms =
{
'UpperCaseInput':
{
'validate': function(maskedInput) {return true;},
'unmask': function(maskedInput) {return maskedInput.masked.value.toUpperCase();},
'mask': function(maskedInput) {return maskedInput.unmasked.value.toUpperCase();}
}
}
</script>
<ComponentArt:MaskedInput runat="server" ID="MaskedInput1"
Transform="UpperCaseInput"
/>
Keep in mind that because you are overwriting ComponentArt_MaskedInput_Transforms, the built-in transforms will no longer work.
- A less drastic solution is to just add your new Transform to the existing ones:
<ComponentArt:MaskedInput runat="server" ID="MyMaskedInput" />
<script type="text/javascript">
window.ComponentArt_MaskedInput_Transforms.UpperCaseInput =
{
'validate': function(maskedInput) {return true;},
'unmask': function(maskedInput) {return maskedInput.masked.value.toUpperCase();},
'mask': function(maskedInput) {return maskedInput.unmasked.value.toUpperCase();}
}
window.MyMaskedInput.set_transform('UpperCaseInput');
</script>
- If you have a source code license and are compiling your own custom builds, you can easily add your transforms directly to the JavaScript file. They will then work just like the original built-in transforms.
If you are doing this, you may also want to extend MaskedInput Transform Intellisense, as described in the next blog post.
