Flex TextInput restrict numbers

The “restrict” property of TextInput control is very useful in restricting input characters.Though restrict=”0-9″ works well for positive numbers, it is not enough for negative and decimal numbers as the user can enter “-” and “.” signs anywhere between the text. NumberInput is a simple class extending Spark TextInput. It has got two properties for controlling the input.

• allowNegative:- Specifies whether negative numbers are permitted. Valid values are true or false
• fractionalDigits:- The maximum number of digits that can appear after the decimal separator. The default value is 0

The base logic is derived from APPDIVISION blog

 

 

package
{
	import flashx.textLayout.operations.InsertTextOperation;

	import spark.components.TextInput;
	import spark.events.TextOperationEvent;

	public class NumberInput extends TextInput
	{
		public function NumberInput()
		{
			updateRegex();
		}

		//regex pattern
		private var regex:RegExp;

		private var _allowNegative:Boolean = true;
		/**
		 *  Specifies whether negative numbers are permitted.
		 *  Valid values are true or false
		 *
		 *  @default true
		 */
		public function set allowNegative(value:Boolean):void
		{
			_allowNegative = value;
			updateRegex();
		}

		private var _fractionalDigits:int = 0;
		/**
		 *  The maximum number of digits that can appear after the decimal
		 *  separator.
		 *
		 *

The default value is 0
		 */
		public function set fractionalDigits(value:int):void
		{
			_fractionalDigits = value;
			updateRegex();
		}

		override protected function childrenCreated():void
		{
			super.childrenCreated();

			//listen for the text change event
			addEventListener(TextOperationEvent.CHANGING, onTextChange);
		}

		public function onTextChange(event:TextOperationEvent):void
		{
			if (regex && event.operation is InsertTextOperation)
			{
				// What will be the text if this input is allowed to happen
				var textToBe:String = "";
				// Check selection
				if (selectionActivePosition > 0)
				{
					textToBe += text.substr(0, selectionActivePosition)
				}
				//append the newly entered text with the existing text
				textToBe += InsertTextOperation(event.operation).text;
				if (selectionAnchorPosition > 0)
				{
					textToBe += text.substr(selectionAnchorPosition, text.length - selectionAnchorPosition);
				}
				var match:Object = regex.exec(textToBe);
				if (!match || match[0] != textToBe)
				{
					// The textToBe didn't match the expression... stop the event
					event.preventDefault();
				}
				//special condition checking to prevent multiple dots
				var firstDotIndex:int = textToBe.indexOf(".");
				if( firstDotIndex != -1)
				{
					var lastDotIndex:int = textToBe.lastIndexOf(".");
					if(lastDotIndex != -1 && lastDotIndex != firstDotIndex)
						event.preventDefault();
				}
			}
		}

		private function updateRegex():void
		{
			var regexString:String = "\\d{0,50}";
			if(_allowNegative)
				regexString = "^\\-?" + regexString;
			else
				regexString = "^" + regexString;
			if(_fractionalDigits > 0 )
				regexString += "\\.?\\d{0," + _fractionalDigits.toString() + "}$";
			else
				regexString += "$";
			regex = new RegExp(regexString);
		}
	}
}

Advertisement