Browse by Tags

• ComponentArt Web.UI
• Input
• NumberInput

• 0 Comments 268 Views

  Building in new MaskedInput Transforms 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. Share this post: email it! | bookmark it! | digg it! | reddit! Posted by: Jovan Posted: Friday, October 24, 2008 7:05 AM Filed under: JavaScript, ComponentArt Web.UI, Input, MaskedInput 0 Comments

  
  
  

• 0 Comments 321 Views

  Customizing MaskedInput Transforms In this blog post I will assume that you understand how MaskedInput Transforms function. It was explained in the previous blog post . Here is the list of currently implemented transforms: CreditCard_VisaMasterCard - Visa or MasterCard credit card number. CreditCard_AmEx - American Express credit card number. Telephone_NorthAmerica - North American telephone number. ZipCode - American ZIP code. PostalCode - Canadian postal code. PostalCode_Australia - Australian postal code. EmailAddress - e-mail address. empty - accepts all inputs. empty Transform is a special case. It accepts all inputs, and it doesn't mask or unmask them. Here is how it looks in code: 'empty' : { 'validate' : function (maskedInput) { // Accept all input: return true ; }, 'unmask' : function (maskedInput) { // Just pass on the edited displayed text: return maskedInput.masked.value; }, 'mask' : function (maskedInput) { // Just pass on the unmasked value: return maskedInput.unmasked.value; } } There is not enough space in this blog post to show the code of the rest of the Transforms, but I made the source code file available for download. Ideally the available transforms will be enough for your requirements. New transforms are very easy to build in, so please don't hesitate to send in your suggestions. However, for those times when your requirements cannot be met by the built-in transforms, there are a number of ways to customize the MaskedInput. In addition to Transform, MaskedInput exposes three more server-side properties: TransformValidate , TransformUnmask , and TransformMask . These allow you to override the behaviour of any of the three transform functions. For example, to make the Visa card transform featured in the previous blog post mask with dashes instead of masking with spaces, you can do something like this: <script type=" text/javascript "> function maskVisaWithDashes(maskedInput) { return maskedInput.unmasked.value.replace(/^(\d{4})(\d{4})(\d{4})(\d{4})$/, '$1-$2-$3-$4'); } </script> < ComponentArt : MaskedInput runat = "server" ID = "MyMaskedInput" Transform = "CreditCard_VisaMasterCard" TransformMask = "maskVisaWithDashes" /> This allows you to fully override any of the Transform's functions. Note that you can also leave the Transform property blank. In that case, the control defaults to the empty transform. In the next blog post, I will introduce another more integrated way to add a new Transform. Share this post: email it! | bookmark it! | digg it! | reddit! Posted by: Jovan Posted: Thursday, October 23, 2008 6:30 AM Filed under: JavaScript, ComponentArt Web.UI, Input, MaskedInput 0 Comments

  
  
  

• 0 Comments 330 Views

  MaskedInput Transform functionality The format of the masked input is fully defined by the "Transform" it uses. A Transform is a client-side JavaScript object containing just three functions: validate – A function that takes a look at what the user just typed into the masked input box, and returns a boolean value: true if text is valid, false if it isn't. For example, if the transform is used to accept a Visa card number, and the user types in "4506/00020002-0002", this function returns true. (It just makes sure that there are exactly 16 digits.) If the user types in "2008-10-14", the function returns false. unmask – A function that takes a look at what the user has just typed into the input box, and "unmasks" it. Typically, this means that the text is cleaned of formatting, leaving behind just the raw data. Unmask gets called even when validate does not return true, so it should not assume that the masked text it is working on is valid. In our example, if the user typed in "4506/00020002-0002", this function will return "4506000200020002". mask – A function that takes a look at the raw, clean data, and "masks" it: formats it for display. With our raw data being "4506000200020002", this function will return "4506 0002 0002 0002". Each of these methods takes only one argument: the reference to the client-side MaskedInput JavaScript object. The function can then easily use this object to get any other information it needs. For example, here is the entire code of the Visa card transform: 'CreditCard_VisaMasterCard' : { 'validate' : function (maskedInput) { // Ensure the unmasked edited text has exactly 16 digits: return this .unmask(maskedInput). length === 16; }, 'unmask' : function (maskedInput) { // Simply remove all the non-digits from the displayed text: return maskedInput.masked.value.replace( /[^\d]/g , '' ); }, 'mask' : function (maskedInput) { // Insert spaces between four-digit groups: return maskedInput.unmasked.value.replace( /^(\d{4})(\d{4})(\d{4})(\d{4})$/ , '$1 $2 $3 $4' ); } } Two often used properties of the client-side MaskedInput object are maskedInput.masked and maskedInput.unmasked: maskedInput.masked refers to the display textbox element that the user sees and edits. It contains the masked text. Although the masked text is typically not examined on the server, it can be accessed as MaskedInput's DisplayText property. maskedInput.unmasked refers to a hidden input that contains the unmasked text. The unmasked text is often examined or manipulated on the server, where it can be accessed as MaskedInput's Text property. Hopefully it is now clear how Transforms function. In the next blog post I will explain how you can customize them. Share this post: email it! | bookmark it! | digg it! | reddit! Posted by: Jovan Posted: Wednesday, October 22, 2008 7:06 AM Filed under: JavaScript, ComponentArt Web.UI, Input, MaskedInput 0 Comments

  
  
  

• 3 Comments 455 Views

  Major input control Gotcha Short Story: This will not work: < ComponentArt : NumberInput runat = "server" ID = "MyNumberInput" /> < input type = "button" value = "+" onclick = "MyNumberInput.increaseValue();" /> < input type = "button" value = "-" onclick = "MyNumberInput.decreaseValue();" /> This is how to correct it: < ComponentArt : NumberInput runat = "server" ID = "MyNumberInput" /> < input type = "button" value = "+" onclick = " window. MyNumberInput.increaseValue();" /> < input type = "button" value = "-" onclick = " window. MyNumberInput.decreaseValue();" /> Long Story: This will work: < ComponentArt : NumberInput runat = "server" ID = "MyNumberInput" /> < input type = "button" value = "+" onclick = "increase();" /> < script type = "text/javascript" > function increase() { MyNumberInput.increaseValue(); } </ script > But, as mentioned before, this: < ComponentArt : NumberInput runat = "server" ID = "MyNumberInput" /> < input type = "button" value = "+" onclick = "MyNumberInput.increaseValue();" /> will instead produce a JavaScript error: MyNumberInput.increaseValue is not a function But isn't that the exact same code?? What is going on? It turns out that in the second case "MyNumberInput" is not referring to the client-side NumberInput object. Instead it is referring to a DOM element of the same name. Like most ComponentArt controls, input controls create a number of client-side DOM elements and JavaScript objects. In this particular example, with a NumberInput named MyNumberInput: In JavaScript, the most important object is named MyNumberInput , and is an instance of client-side class ComponentArt.Web.UI.NumberInput . In the DOM, there are a number of different elements, including a text input with the id MyNumberInput . This results in a very unusual naming conflict. Normally, when you write MyNumberInput in client-side code, you expect it to refer to the global JavaScript object of that name. And it does. Except when the code is running in the event handler of an HTML tag. Then MyNumberInput refers to the DOM element with that id. Which is probably not what you want. To avoid ambiguity, you can use window.MyNumberInput to refer to the JavaScript object, and document.getElementById('MyNumberInput') to refer to the DOM element. So why don’t we fix this? Well, it turns out that there is no real bug here. First of all, this is not a design that is unique to ComponentArt input controls. In fact, most ComponentArt controls produce JavaScript objects and DOM elements with matching identifiers, for a number of reasons. What is different with input controls is that the DOM element in question happens to be a form element. This triggers the naming conflict. However, having these matching identifiers turns out to be needed for the input controls to work smoothly with ASP.NET’s client-side validation, which is a very important feature. So it is unlikely that we will be able to "fix" this. Instead, just please keep this gotcha in mind. Share this post: email it! | bookmark it! | digg it! | reddit! Posted by: Jovan Posted: Tuesday, October 14, 2008 8:17 AM Filed under: JavaScript, ComponentArt Web.UI, Input, NumberInput, MaskedInput 3 Comments