How to convert s:TextInput to upper case?

[elmonty2]

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.

[SpaghettiCoder]

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()

[elmonty2]

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

[GordonSmith]

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

[David_F57]

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

[SpaghettiCoder]

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)"/>

[elmonty2]

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();

[SpaghettiCoder]

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...

[elmonty2]

My code remembers where the user's caret position was so that it doesn't automatically get moved to the end if they insert a character in the middle.

[Guest]

Another approach is to create a handler for the TextEvent.TEXT_INPUT event and convert the event.text property to upper case. I listened for the event during the capture phase.

As a side note: Flex 3 or the mx.controls.TextInput used to do the conversion to upper case automatically if the restrict was A-Z.

[JabbyPandaUA · Accepted solution]

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

e.g

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

[elmonty2]

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

[JabbyPandaUA]

   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

[GordonSmith]

The typographicCase only affects how the text looks (i.e., the font glyphs that are used to render it), not the Unicode characters in the text itself. For example, suppose you set typographicCase to "uppercase" and type "Hello". You'll see HELLO but if you get the 'text' property of the TextInput it will be "Hello".

Gordon Smith

Adobe Flex SDK Team

[elmonty2]

Thanks for that informative nugget, Gordon. That is helpful to know.

I do wonder who may have decided that that behavior was desirable, in that what you see is not what you get.

[GordonSmith]

It is normal for advanced text systems to have non-trivial algorithms for mapping the Unicode characters in a String to the glyphs in the font that will render those characters. For example, if you enable ligatures, then character pairs like "ae", "fi", and "ff" are rendered by a single glyph. In some non-Roman alphabets, almost everything becomes a ligature. (I think Arabic is like this.) Think of the String as the Model, the glyphs as the View, and the text renderer as the Controller in a MVC architecture.

Gordon Smith

Adobe Flex SDK Team

[Carlos_Rovira]

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();

     }

}

[Guest]

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