Skip to main content
E
elmonty2
Known Participant
June 2, 2010
Answered

How to convert s:TextInput to upper case?

  • June 2, 2010
  • 6 replies
  • 11267 views

How do I set up a <s:TextInput> element so that when the user types, it appears in upper case?

I've tried the restrict property, but that doesn't convert the text, and it only would confuse the user because if they start typing in lower case (the norm), nothing happens.  How frustrating.

I've tried replacing the text property in the change event, but that forces the cursor to the beginning of the field each time.

    This topic has been closed for replies.
    Correct answer JabbyPandaUA

    Just set style "typographicCase"  to "uppercase" value, thankfully to new FTE.

    e.g

    <s:TextInput id="ti"
   typographicCase="uppercase">

    6 replies

    A
    Anonymous
    September 3, 2014

    Is there any possibility to set title case in typographic case in flex.Thanks in advance

    C
    Carlos_Rovira
    Known Participant
    December 1, 2011

    Hi,

    this is the way Gordon is pointing us:

    addEventListener(TextOperationEvent.CHANGING, forceUppercase);

    protected function forceUppercase(event:TextOperationEvent):void

    {

         if (event.operation is InsertTextOperation)

         {

               var insertTextOp:InsertTextOperation = event.operation as InsertTextOperation;

               insertTextOp.text = insertTextOp.text.toUpperCase();

         }

    }

    JabbyPandaUA
    JabbyPandaUACorrect answer
    Inspiring
    June 14, 2010

    Just set style "typographicCase"  to "uppercase" value, thankfully to new FTE.

    e.g

    <s:TextInput id="ti"
   typographicCase="uppercase">

    E
    elmonty2Author
    Known Participant
    June 14, 2010

    Wow, that's not even in the documentation for TextInput.  It's perfect.  How did you know about that?

    JabbyPandaUA
    JabbyPandaUA
    Inspiring
    June 14, 2010

       I find it odd that "typographicCase" style is not documented for Spark TextInput component, although it is documented for RichEditableText component used in default TextInput spark skin.

      I  logged docs bug https://bugs.adobe.com/jira/browse/FLEXDOCS-1297,  suppoted by Peter deHaan sample to use "typographicCase" together with TextInput control, proof link at JIRA

    S
    SpaghettiCoder
    Known Participant
    June 2, 2010

    protected
     function ti3_changeHandler(event:TextOperationEvent):void
    { 
         ti3.text = ti3.text.toUpperCase()
         ti3.selectRange(ti3.text.length, ti3.text.length);
         ti3.setFocus(); 
    }
    <s:TextInput x=
    "186" y="306" id="ti3" change="ti3_changeHandler(event)"/>

    E
    elmonty2Author
    Known Participant
    June 4, 2010

    Thanks to SpaghettiCoder for getting me 99% of the way there.  Here's the final solution:

    var selectionAnchor:int = vinInput.selectionAnchorPosition;
    var selectionActive:int = vinInput.selectionActivePosition;
                   
    vinInput.text = vinInput.text.toUpperCase();
    vinInput.selectRange(selectionAnchor, selectionActive);
    vinInput.setFocus();

    S
    SpaghettiCoder
    Known Participant
    June 4, 2010

    Your code takes an additional two lines, and uses up more resources by needing to store the var.  But if it works then it's all good...

    D
    David_F57
    Participating Frequently
    June 2, 2010

    hi,

    (myTextInput.text).toUpperCase();

    If you haven't used formatters on the input this is the way to convert it, especially when you want to maintain say propercase but ensure that a string comparison works correctly -

    i.e.

    if myString.UpperCase() ==  (myTextInput.text).toUpperCase())  do something....

    or just a straight conversion

    myTextInput.text = (myTextInput.text).toUpperCase();

    David

    S
    SpaghettiCoder
    Known Participant
    June 2, 2010

    Yeah restrict wouldn't work, or would confuse the user.  I'd look at a formatter might have to custom make your own.

    Do the users need to see it all in upper case, or are you entering this stuff into a database, if you're just entering it into a DB then just let the user type in whatever and do a .toUpperCase()

    E
    elmonty2Author
    Known Participant
    June 2, 2010

    It's a VIN, so the users need to see it in upper case as they are typing.

    G
    GordonSmith
    Participating Frequently
    June 2, 2010

    I think you can do this by writing a handler for the 'changing' event.The FlowOperationEvent that you handle will have a TLF InsertTextOperation in it. The InsertTextOperation will have the text that is about to be inserted. Since the 'changing' event is dispatched before the text is inserted, you have an opportunity to uppercase it before it is inserted.

    Gordon Smith

    Adobe Flex SDK Team

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices