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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值