The following example shows how you can prevent a user from pressing Enter in a Flex TextArea control by listening for the textInput event and checking the TextEvent object’s text property for a newline character (”\n”).
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/07/preventing-line-feeds-in-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function textArea_textInput(evt:TextEvent):void {
if (evt.text == "\n") {
evt.preventDefault();
}
}
]]>
</mx:Script>
<mx:TextArea id="textArea"
verticalScrollPolicy="on"
width="160"
height="120"
textInput="textArea_textInput(event);">
<mx:text>The quick brown fox jumped over the lazy dog.</mx:text>
</mx:TextArea>
</mx:Application>
View source is enabled in the following example.
Update 8/19/2008: If you want to prevent a user from pasting text with a carriage return/linefeed, you could listen for the change event and use the String class’s replace() method to replace any newline (”\n”) or linefeed (”\r”) with an empty string, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/07/preventing-line-feeds-in-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function textArea_textInput(evt:TextEvent):void {
if (evt.text == "\n") {
evt.preventDefault();
}
}
private function textArea_change(evt:Event):void {
textArea.text = textArea.text.replace(/\n|\r/ig, "");
}
]]>
</mx:Script>
<mx:TextArea id="textArea"
text="The quick brown fox jumped over the lazy dog."
verticalScrollPolicy="on"
width="100%"
height="100%"
textInput="textArea_textInput(event);"
change="textArea_change(event);" />
</mx:Application>
Hi,Peter deHaan
Thanks for your great post!
I have a another question about this.
I use TextArea component in flex, trigger “Ctrl + Enter” event to newline(use this to send messege in my project), but more empty newline in IE(it’s ok in Firefox or trigger ‘Shift+Enter’),how can i solve this problem?
Thank you very much!!!
Code like below
if(evt.ctrlKey == true && evt.keyCode == Keyboard.ENTER) { ... }hi dis is manish workin in teknopoint multimedia thanks for givin the source of this code…i was trying to disable the enter key by using ifocus manager bt everythin invain..ur code help me out in dis thanks….
How can I disable backspace, left arrow and right arrow keys ?
Can arrow keys disable? I do not know how to do this.
PEFRECT! This solves half of my problem… Care to share if you have a way to prevent someone from doing a copy/paste of text with line feeds in it? Solve that and I’ll be home free!
manovotny,
The code is a bit rough, but does the following work for you?
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function textArea_textInput(evt:TextEvent):void { if (evt.text == "\n") { evt.preventDefault(); } } private function textArea_change(evt:Event):void { textArea.text = textArea.text.replace(/\n|\r/ig, ""); } ]]> </mx:Script> <mx:TextArea id="textArea" text="The quick brown fox jumped over the lazy dog." verticalScrollPolicy="on" width="100%" height="100%" textInput="textArea_textInput(event);" change="textArea_change(event);" /> </mx:Application>Peter
hey guys,
i want to prevent linefeed using ENTER key rather i want to apply line feed using SHIFT + ENTER key. How do i do that?
any hint?
thanks in advance
hey guys,
sorry to bother you
looks like i found a workaround for that
just used a keylistener as said by jexchan
textInput="if(event.text.indexOf('\n')!=-1)event.preventDefault();"come on … it is one line code
Hi Peter,
If you can help me - I am working on a chat application - On Enter I want to send the text and on Shift + Enter I want to insert a line feed in the text area where the sender types message. The solution above inserts a linefeed after the whole text, does not break it into multiple lines.
Thanks