TextArea keydown event

[Pavlinius]

Hello. I have a very annoying problem, that might be solved pretty easy, but I have problems with that :). I wrote a code snipplet that illustrates what my problem is. Imagine a messenger and you want to send the text that the user typed when you hit the Enter key. So the keydown handler on the Panel (or the textarea, doesn't matter) takes the textarea text, send it to the server and then it should clear the text area. The problem is that the textArea has its own predefined keydown handler which is dispathed later and the result is the textArea.text is preset and the text is the old text + new line character (because of the Enter). So here's is the code that illustrates this : when you click the button the textArea is cleared. When you hit the Enter the message is sent, but the textArea is not cleared.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">


<mx:Script>
<![CDATA[
private function keyDown(event:KeyboardEvent):void{
if (event.keyCode==Keyboard.ENTER)
this.sendMessage();
}
private function sendMessage():void{
this.result.text+="message sent\n";
//Communicator.sendTextMessage(this.userInput.text)
this.userInput.text="";
}

]]>
</mx:Script>
<mx:Panel x="106" y="80" width="297" height="178" layout="absolute" keyDown="keyDown(event)">
<mx:TextArea x="31" y="84" id="userInput"/>
<mx:Button x="199" y="106" label="Send" click="sendMessage()"/>
<mx:TextArea x="31" y="10" id="result"/>
</mx:Panel>

</mx:WindowedApplication>

[mca_kkchaitanya]

change the type from keyDown to KeyUp in panel tag

[Pavlinius]

There should be a way to do it with a keyDown handler ! KeyUp works but for a part of a second you see that the selector goes to the next line and then the message is sent, which is not very good. And also if the user keeps the Enter pressed it just keeps adding new lines.
Eventually I could try to create my own text area component ?? I think there should be an easier and better way.

[Peter Cowling]

Hi,

Remove the keyDown from the panel and place it in the textArea.

EDIT
If that does not fix the problem, you may have to filter out unwanted event.type(s).

[Pavlinius]

Hi,

Remove the keyDown from the panel and place it in the textArea.

EDIT
If that does not fix the problem, you may have to filter out unwanted event.type(s).

No , moving the keyDown listener on the textArea does not help :eek:.

Would it be a good idea to extend the TextArea an override the default keyDown handler (if it's possible) ?

[Pavlinius]

Well no need to extend the TextArea. I've just found out how usefull event.preventDefault() might be :).

so the keyDown handler from the example below should look like :

private function keyDown(event:KeyboardEvent):void{
if (event.keyCode==Keyboard.ENTER){
event.preventDefault();
this.sendMessage();
}
}

and this solves my problem :)

PS : In fact the code above works OK only for ADOBE AIR applications BUT NOT for ADOBE FLEX applications. The same code works differently when put in AIR and Flex applications. So the problem remains, because I need it to work for Flex RIA. :confused::confused:

[Peter Cowling]

Well I never knew of that preventDefault function, so that is good to know.

I expected that you would need to use prevent the event propigating by type.

[Pavlinius]

Well I never knew of that preventDefault function, so that is good to know.

I expected that you would need to use prevent the event propigating by type.

Yes, but this preventDefault seems to not work in my case for Adobe Flex applications . I initially tested it in AIR application, but the same code does not work for Flex. So I'm at starting position.
How can I prevent the event propagating by type ? If I add event.stopImmediatePropagation - this does not work also .

[Pavlinius]

Well after a few more test I finally got it. The textArea dispatch 3 events when you hit a keyboard key - KeyboardEvent.KeyDown, Event.Change and TextEvent.Text_input.
The problem is the third one, so in order the Flex application to not dispatch this event when you hit Enter you must set a textInput handler like this:


<mx:Script>
<![CDATA[

private function txtInputHandler(event:TextEvent):void{
if (event.text=="\n"){
event.prevendDefault();
event.stopImmediatePropagation();
}
}

]]>
</mx:Script>
<mx:TextArea x="31" y="84" id="userInput" textInput="txtInputHandler(event)"/>


The keyDown event for the panel remains the same as the example below.

[tristan198474]

I encountered the same problem! Thank you for your help, Pavlinius!


____________________
Tristan
http://www.comm100.com/livechat/

[heman0815]

Thank you so much. Thats the way it works nice and smooth.