Flex IP InputBox Component

由于Flex未提供基于IP格式的输入框,自己实现了个,share下:
import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.events.MouseEvent;
	import flash.ui.Keyboard;
	
	import mx.containers.HBox;
	import mx.controls.Alert;
	import mx.controls.Label;
	import mx.controls.TextInput;
	public class IpInputBox extends HBox
	{	
        private const DOT1:uint = 110;
        private const DOT2:uint = 190;
        private const DOT3:uint = 39;
        private const DOT4:uint = 37;
        private const DOT5:uint = 32;
        private const STR_NULL:String = '';
        
        private var pointIndex:int = 0;
        
        private var nullNow:Boolean = false;
       
        private var ips:Array;
        private var txt:Array;
		public function IpInputBox()
		{
			super();
			this.setStyle("backgroundColor","#646464");			
            ips = new Array('','','','');
            txt = new Array();
		}
		override protected function createChildren():void
        {
            super.createChildren();
            setStyle('horizontalGap', 0);
            for (var i:uint = 0; i <4; i++)
            {
                if (i> 0)
                {
                    var newLabel:Label = new Label();
                    newLabel.setStyle("color","#ffffff");
                    newLabel.text = '.';
                    newLabel.width = 7;
                    addChild(newLabel);
                }
                var newInput:TextInput = new TextInput();
      
                newInput.maxChars = 3;
                newInput.percentWidth = 100;
                newInput.restrict = '0-9';
                //newInput.width=30;
                newInput.setStyle("fontSize", "10");
                newInput.setStyle("themeColor", "white");
                newInput.setStyle("color","white");
                newInput.setStyle("backgroundColor","#646464");
                newInput.setStyle("focusThickness", "0");
                newInput.setStyle("borderStyle", "none");
                newInput.setStyle("backgroundAlpha", "0");
                newInput.setStyle("textAlign", "center");
                newInput.addEventListener(Event.CHANGE, changeHandler);
                newInput.addEventListener(KeyboardEvent.KEY_UP, keyDownInTextHandler);
                newInput.addEventListener(MouseEvent.CLICK,mouseClickInTextHandler);
                txt.push(newInput);
                addChild(newInput);
            }
        }
       
        //////////////////////////////
        // getter & setter
        //////////////////////////////
       
        /**
         * IP value
         * */
        [Bindable]
        public function set value(v:String):void
        {
            ips = v.split('.', 4);
            for (var i:uint = 0; i <txt.length; i++)
            {
                txt[i].text = ips[i] = formatIpPart(ips[i]);
            }
        }
        public function get value():String
        {
            for (var i:uint = 0; i <txt.length; i++)
            {
                txt[i].text = ips[i] = padIpPart(ips[i]);
            }
            return ips.join('.');
        }
       
        //////////////////////////////
        // private functions
        //////////////////////////////
       
        /**
         * to fill up the blank
         * */
        private function padIpPart(part:String):String
        {
            if (STR_NULL == part)
            {
                //part = "0";
                part = "";
            }
            return part;
        }
       
        /**
         * format input
         * */
        private function formatIpPart(part:String):String
        {
            if (null == part || STR_NULL == part)
            {
                part = '';
            }
            else
            {
                part = part.replace(/[^0-9]/g, STR_NULL);
            }
            if (uint(part)> 255)
            {
                part = "255";
            }
            return part;
        }
       
        /**
         * let the former inputbox get the focus
         * */
        private function setFocusToPrevText(target:TextInput):TextInput
        {
            var index:int = txt.indexOf(target);
            if (index> 0)
            {
                txt[index - 1].setFocus();
                txt[index - 1].selectionBeginIndex = txt[index - 1].selectionEndIndex = txt[index - 1].length;
                return txt[index - 1];
            }
            return target;
        }
         /**
         * let the former inputbox get the focus by left arrow
         * */
 		private function setFocusToPreTextByLeftArrow(event:KeyboardEvent):void
 		{
 			var thisText:TextInput = event.currentTarget as TextInput;
 			var index:int = txt.indexOf(thisText);			
 			if(0 == pointIndex){
                setFocusToPreTextLastPosition(thisText);
                return;
            }
            pointIndex = thisText.selectionBeginIndex;
 		}
 		private function setFocusToPreTextLastPosition(target:TextInput):TextInput{
 			var index:int = txt.indexOf(target);
            if (index >0)
            {
                txt[index - 1].setFocus()
                txt[index - 1].setSelection(txt[index - 1].length,txt[index - 1].length);
                pointIndex = txt[index - 1].length;   
                return txt[index + 1];
            }
            return target;
 		}
       
        /**
         * let the later inputbox get the focus
         * */
        private function setFocusToNextText(target:TextInput):TextInput
        {
            var index:int = txt.indexOf(target);
            if (index <3)
            {
                txt[index + 1].setFocus();
                txt[index + 1].setSelection(0,0);
                pointIndex =0;
                return txt[index + 1];
            }
            return target;
        }
         /**
         * let the later inputbox get the focus by right arrow
         * */
 		private function setFocusToNextTextByRightArrow(event:KeyboardEvent):void{
 			var thisText:TextInput = event.currentTarget as TextInput;
 			var index:int = txt.indexOf(thisText);
 			if(thisText.length == pointIndex){
                setFocusToNextTextFirstPosition(thisText);
                return;
   			}
            pointIndex = thisText.selectionBeginIndex;
 		}
 		private function setFocusToNextTextFirstPosition(target:TextInput):TextInput{
 			var index:int = txt.indexOf(target);
            if (index <3)
            {	
            	pointIndex =0;
                txt[index + 1].setFocus()
                txt[index + 1].setSelection(0,0);
                               
                return txt[index + 1];
            }
            return target;
 		}
       
        ////////////////////////////
        // handler
        ////////////////////////////
   		
   		private function mouseClickInTextHandler(event:MouseEvent):void{
   			var thisText:TextInput = event.currentTarget as TextInput;
   			pointIndex = thisText.selectionBeginIndex;
   		}
   		
        private function keyDownInTextHandler(event:KeyboardEvent):void
        {	
        	
            var thisText:TextInput = event.currentTarget as TextInput;

            if (DOT1 == event.keyCode || DOT2 == event.keyCode || DOT5 == event.keyCode)
            {
                STR_NULL != thisText.text && setFocusToNextText(thisText);
            }
            if (DOT3 == event.keyCode){
            	setFocusToNextTextByRightArrow(event);
            }
            if (DOT4 == event.keyCode){
            	setFocusToPreTextByLeftArrow(event);
            }
            if (!nullNow && Keyboard.BACKSPACE == event.keyCode && 0 == thisText.selectionBeginIndex)
            {
                var curText:TextInput = setFocusToPrevText(thisText);
                curText.setFocus();
                curText.setSelection(curText.length,curText.length);
                //curText.text = curText.text.substr(0, curText.length - 1);
            }
            
            nullNow = false;
        }
       
        private function changeHandler(event:Event):void
        {	
            var thisText:TextInput = event.currentTarget as TextInput;
            var index:int = txt.indexOf(thisText);
            thisText.text = ips[index] = formatIpPart(thisText.text);
            if (thisText.length == 3)
            {
                // focus next inputbox
                setFocusToNextText(thisText);
            }
            if (STR_NULL == thisText.text)
            {
                nullNow = true;
            }
            pointIndex = thisText.selectionBeginIndex;
        }
    } // end class

你可能感兴趣的:(UI,Flex,Flash,UP)