4 Replies Latest reply on Apr 28, 2009 12:44 AM by Barna Biro

    user feedback with maxChar attribute on TextInput

    rotts2 Level 1

      I have a textinput with maxChars=6

       

      i would like to have some sort of user feedback when they attempt to type the 7th char.  (red border, tooltip, etc...)

       

      what would be the ideal way to achieve this?

       

      I don't see where there is an event dispatched when a user tries to type the 7th char ?

        • 1. Re: user feedback with maxChar attribute on TextInput
          ATIF FAROOQ Level 3

          hi,

             you can use change event of textfield and remove the maxChars=6 property

                                        change event handler should be like this

           

                                     function changeHandler(e:Event){

                                             if(e.target.text.length>6){

                                                      //////notifyUser

                                              }

                                     }

           

          and for redBorder you can use Form and apply stringValidator on your textField that length of characters in textField should be 6 or less if not then

          throw validation Errror . in that case flex shows red ToolTip on in front of the text field on which validation error occurred along with red border

           

             see this link for help on validators http://livedocs.adobe.com/flex/3/html/validators_3.html

          1 person found this helpful
          • 2. Re: user feedback with maxChar attribute on TextInput
            Barna Biro Level 3

            Hi there,

             

            The change event would be a solution but a slightly more efficient solution would be to simply listen for a keyDown event. Here's a fast example that hopefully will help you get on the right track:

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application 
                xmlns:mx            ="http://www.adobe.com/2006/mxml"
                backgroundColor     ="#FFFFFF" 
                layout              ="absolute">
                
                <mx:Script>
                    <![CDATA[
                        import mx.controls.Alert;
                        import mx.events.FlexEvent;
                        import mx.controls.TextInput;
                        
                        private static const ALLOWED_MAX_CHARS:int = 6;
                        
                        private function onInputFieldFill(event:KeyboardEvent):void
                        {
                            if (event.charCode != Keyboard.LEFT &&
                                event.charCode != Keyboard.RIGHT &&
                                event.charCode != Keyboard.UP &&
                                event.charCode != Keyboard.DOWN)
                            {
                                var target:TextInput = event.currentTarget as TextInput;
                            
                                if (target.text.length > ALLOWED_MAX_CHARS - 1)
                                {
                                    target.text = target.text.slice(0, ALLOWED_MAX_CHARS);
                                    Alert.show("You tried to add 7 characters!", "ERROR");
                                }
                            }
                        }
                        
                    ]]>
                </mx:Script>
                
                <mx:VBox
                    width               ="100%"
                    height              ="100%"
                    horizontalAlign     ="center"
                    verticalAlign       ="middle">
                    
                    <mx:TextInput
                        id              ="userInputField"
                        keyDown         ="onInputFieldFill(event)"/>
                    
                </mx:VBox>
                
            </mx:Application>
            

             

            The code I posted is not perfect, it's an older file of mine that I have found and edited a bit so don't use it as it is.

             

            Blog: http://blog.wisebisoft.com

            With best regards,

            Barna Biro

            1 person found this helpful
            • 3. Re: user feedback with maxChar attribute on TextInput
              rotts2 Level 1

              at first i used this approach, but it did not work the way i expected

               

              I am using an Item editor on a DataGrid cell for input.

               

              I think my issue was that My ItemEditor was extending Label instead of TextInput

              • 4. Re: user feedback with maxChar attribute on TextInput
                Barna Biro Level 3

                Hi again,

                 

                Somehow, I totally forgot that we have a TextEvent class that might come in handy in such situations. Check this out: http://livedocs.adobe.com/flex/3/langref/flash/events/TextEvent.html Creating to TEXT_INPUT instead of a generic KEY_DOWN event might be the solution ( you can obviously play around with the stuff and maybe come up with a different solution too ).

                 

                With best regards,

                Barna Biro