HTMLTextInput.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" initialize="init()" xmlns:ui="ui.*" horizontalScrollPolicy="off" verticalScrollPolicy="off" implements="mx.managers.IFocusManagerComponent">
	<mx:Script>
		<![CDATA[
			import flash.text.engine.*;
			import mx.core.FlexSprite;
			import mx.core.UIComponent;
			import mx.controls.Alert;
		
			private var _fontFamily:String;
			[Bindable]
			public function set fontFamily(value:String):void
			{
				_fontFamily = value;
			}
			public function get fontFamily():String
			{
				return _fontFamily;
			}
			
			private var _fontSize:Number;
			[Bindable]
			public function set fontSize(value:Number):void
			{
				_fontSize = value;
			}
			public function get fontSize():Number
			{
				return _fontSize;
			}
			
			private var _color:Object;
			[Bindable]
			public function set color(value:Object):void
			{
				_color = value;
			}
			public function get color():Object
			{
				return _color;
			}
			
			private var _paddingLeft:Object;
			[Bindable]
			public function set paddingLeft(value:Object):void
			{
				_paddingLeft = value;
			}
			public function get paddingLeft():Object
			{
				return _paddingLeft;
			}
			
			private var _paddingRight:Object;
			[Bindable]
			public function set paddingRight(value:Object):void
			{
				_paddingRight = value;
			}
			public function get paddingRight():Object
			{
				return _paddingRight;
			}
			
			private var _paddingTop:Object;
			[Bindable]
			public function set paddingTop(value:Object):void
			{
				_paddingTop = value;
			}
			public function get paddingTop():Object
			{
				return _paddingTop;
			}
			
			public function set text(value:String):void
			{
				lbl.text = value;
				dispatchEvent(new Event(Event.CHANGE));
			}
			public function get text():String
			{
				return lbl.text;
			}
			
			private function init():void
			{
				this.addEventListener(MouseEvent.CLICK,onClick);
			}
			
			private function onClick(e:MouseEvent):void
			{
				var topLeft:Point = new Point(0, 0);				
	            topLeft = this.localToGlobal(topLeft);
	            ExternalInterface.addCallback("updateFlashTextField",updateFlashTextField);
	            ExternalInterface.addCallback("finishUpdateFlashTextField",finishUpdateFlashTextField);
				ExternalInterface.call("enterTextField", topLeft.x+3, topLeft.y+2, this.width-6, this.height-4, this.text, lbl.fontSize, lbl.fontFamily);
			}
			
			private function updateFlashTextField(str:String):void
			{
				this.text = str;
			}
			
			private function finishUpdateFlashTextField(str:String):void
			{
				this.text = str;
				this.dispatchEvent(new Event(Event.COMPLETE));
			}
			public override function setFocus():void
			{
				onClick(null);
				super.setFocus();
			}
		]]>
	</mx:Script>
	<ui:ExtendedLabel id="lbl" width="{this.width}" height="{this.height}" 
					  fontFamily="{fontFamily}" fontSize="{fontSize}" color="{color}" 
					  paddingTop="{paddingTop}" paddingRight="{paddingRight}" paddingLeft="{paddingLeft}"/>	
</mx:Canvas>