Preventing line feeds in a TextArea control in Flex

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.

View MXML

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

Tagged as: preventDefault()