Flex: Pasting a serial number

In the past if you want to detect pasting of a text into a normal text field, you probably can try checking for Ctrl+V but what about the paste option on a mouse right click menu? Well, you can always start looking out for the change of the text in the text field, but that will become more and more complicated... :( As for today, I 'm going to show you a easier way to do it...

Here's the source code of my main application.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"
      width="100%" height="100%">
 <fx:Script>
  <![CDATA[
   import flashx.textLayout.operations.PasteOperation;
   
   import spark.events.TextOperationEvent;
   
   //Max number of char that we allow in each text field.
   public static var numOfMaxChar:int = 4;
   //Number of text field that we have
   public static var numOfBox:int = 4;
   //Delimiter or seperator 
   public static var delimiter:String = "-";
   
   //Upon changing the text in each text field...
   protected function changeHandler(event:TextOperationEvent):void
   {
    var tempTxtField:TextInput;
    var currentStr:String = "";
    var id:String;
    //Check whether this is a paste action
    if (event.operation is PasteOperation) 
    {
     //Get the numerical num of the current text field
     //if the user paste something in the 2nd field, 
     //paste action should work from 2 onwards
     id = String(event.target.id).split("Txt")[1];
     //Grab the text in this text field
     currentStr = event.target.text;
     //Pass it into the function populateTextBox
     populateTextBox(currentStr,id);
    }
    
    //If the user tries to edit this textfield,
    //we need to ensure that the text in the textfield
    //is shorter than the Max number of char that we 
    //allow in each text field.
    if(String(event.target.text).length > numOfMaxChar)
    {
     event.target.text = String(event.target.text)
      .substr(0,numOfMaxChar);
    }
    
    //Now we will combine all the text in the editable
    //text field and populate them in the next field
    serialTxt.text = "";
    for(var i:int = 0; i < numOfBox; i ++)
    {
     tempTxtField = (this["serialTxt" + String(i)]) as TextInput;
     if(i != 0)
     {
      serialTxt.text += delimiter;
     }
     serialTxt.text += tempTxtField.text;
    }
   }
   
   //This function will handle all the populating of
   //the text into its neighbours.
   private function populateTextBox(tempStr:String, 
            tempID:String = "0"):void
   {
    var textArray:Array;
    var id:String = tempID;
    var count:int = 0;
    var tempTxtField:TextInput;
    //If the copied text contains the delimiter
    if(String(tempStr).indexOf(delimiter) != -1)
    {
     //Split them based on the delimiter
     textArray = String(tempStr).split(delimiter);
     for(var i:int = Number(id); i < textArray.length; i ++)
     {
      tempTxtField = (this["serialTxt" + String(i)]) as TextInput;
      tempTxtField.text = textArray[count]
       .substr(0,numOfMaxChar);
      count ++;
     }
    }else{
     //Otherwise just split them accordingly
     for(i = Number(id); i < numOfBox; i ++)
     {
      tempTxtField = (this["serialTxt" + String(i)]) as TextInput;
      tempTxtField.text = String(tempStr)
       .substr(count * numOfMaxChar, numOfMaxChar);
      count ++;
     }
    }
   }
  ]]>
 </fx:Script>
 <s:BorderContainer width="100%" height="100%">
  <s:layout>
   <s:VerticalLayout verticalAlign="middle" 
         horizontalAlign="center"
         gap="0"/>
  </s:layout>
  <s:FormItem label="Serial Number:">
   <s:layout>
    <s:HorizontalLayout gap="0" verticalAlign="middle"/>
   </s:layout>
   <s:TextInput id="serialTxt0" width="60" 
       change="changeHandler(event)"/>
   <s:Label text="-"/>
   <s:TextInput id="serialTxt1" width="60" 
       change="changeHandler(event)"/>
   <s:Label text="-"/>
   <s:TextInput id="serialTxt2" width="60" 
       change="changeHandler(event)"/>
   <s:Label text="-"/>
   <s:TextInput id="serialTxt3" width="60" 
       change="changeHandler(event)"/>
  </s:FormItem>
  <s:TextInput id="serialTxt" text="" width="250"
      editable="false" selectable="false"/>
 </s:BorderContainer>
</s:Application>

* Click here for the demo.
  (Try pasting text like ABCD-2934-ADSG-4890 or 1234HJGF9898DDNN into the demo. :))
^ Click here for the source files of the demo.