The following example shows how you can detect when a user double clicks a Flex TextInput control using the doubleClick event.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/24/detecting-a-double-click-on-a-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function textInput_doubleClick(evt:MouseEvent):void {
var ti:TextInput = evt.currentTarget as TextInput;
ti.enabled = !ti.enabled;
ti.editable = ti.enabled;
}
]]>
</mx:Script>
<mx:TextInput id="textInput1"
text="The quick brown fox jumped over the lazy dog"
doubleClickEnabled="true"
doubleClick="textInput_doubleClick(event);" />
<mx:TextInput id="textInput2"
text="The quick brown fox jumped over the lazy dog"
doubleClickEnabled="true"
doubleClick="textInput_doubleClick(event);" />
</mx:Application>
View source is enabled in the following example.
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/24/detecting-a-double-click-on-a-textinput-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.controls.TextInput;
private var textInput1:TextInput;
private var textInput2:TextInput;
private function init():void {
textInput1 = new TextInput();
textInput1.text = "The quick brown fox jumped over the lazy dog";
textInput1.doubleClickEnabled = true;
textInput1.addEventListener(MouseEvent.DOUBLE_CLICK,
textInput_doubleClick);
addChild(textInput1);
textInput2 = new TextInput();
textInput2.text = "The quick brown fox jumped over the lazy dog";
textInput2.doubleClickEnabled = true;
textInput2.addEventListener(MouseEvent.DOUBLE_CLICK,
textInput_doubleClick);
addChild(textInput2);
}
private function textInput_doubleClick(evt:MouseEvent):void {
var ti:TextInput = evt.currentTarget as TextInput;
ti.enabled = !ti.enabled;
ti.editable = ti.enabled;
}
]]>
</mx:Script>
</mx:Application>




Hi,
when you doubleclick you will select a whole word. To remove the selection, add the following befor the closing brace of the function:
ti.setSelection(0,0);
This will select nothing.
g2 cbr
Quick question, I have built the same application with a basic textinput but on my laptop I cant type number and the ‘%’ char. But on this example I can.
So what are the differences???
Tom,
Is the
restrictproperty set?Peter
Hi peterd, yes I restrict only number. But I have the same problem with a TextInput w/o any restrict. I have noticed I have this problem on some other flex applications, should be a local setting compiler or something like that?
Tom,
It shouldn’t be. Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case showing the behavior. Somebody on the Flex SDK QA team can look into it.
Peter
Ok I found the bug!!! When you set the wmode to ‘opaque’ the keyboard doesnt work properly. Woa, is it normal?
Apparently, its a famous bug! http://www.novio.be/blog/?p=416