hanyeah

用as3实现了一个带提示的输入框，就是不输入内容的时候显示提示输入的内容，点击进去之后提示内容清空，可以正常输入。

还是看效果吧。

以前都是用两个文本框来做，虽然效果一样，但是显得很不专业，在网友的提示下，用一个文本框实现了。

代码如下：

package  {

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.FocusEvent;
	import flash.events.TextEvent;
	import flash.text.TextField;


	public class HInputTf extends Sprite{

		private var tf:TextField;
		private var hintText:String = "请输入...";
		private var hintColor:uint;
		private var normalColor:uint;
		private var _text:String = "";
		public function HInputTf(tf:TextField,hintText:String,hintColor:uint=0xcccccc) {
			// constructor code

			this.tf = tf;
			this.hintText = hintText;
			this.hintColor = hintColor;

			normalColor = tf.textColor;
			tf.textColor = hintColor;
			tf.text = hintText;
			tf.addEventListener(FocusEvent.FOCUS_IN, onFocusIn);
			tf.addEventListener(FocusEvent.FOCUS_OUT, onFocusOut);
			tf.addEventListener(TextEvent.TEXT_INPUT, onInput);
			tf.addEventListener(Event.CHANGE, onChange);
		}
		public function removeListen():void {
			tf.removeEventListener(FocusEvent.FOCUS_IN, onFocusIn);
			tf.removeEventListener(FocusEvent.FOCUS_OUT, onFocusOut);
			tf.removeEventListener(TextEvent.TEXT_INPUT, onInput);
			tf.removeEventListener(Event.CHANGE, onChange);
		}
		private function onChange(e:Event):void 
		{
			//trace("onChange");
			_text = tf.text;
		}

		private function onInput(e:TextEvent):void 
		{
			//trace("onInput");
		}

		private function onFocusOut(e:FocusEvent):void 
		{
			if (tf.text=="") {
				tf.text = hintText;
				_text = "";
				tf.textColor = hintColor;
			}
		}

		private function onFocusIn(e:FocusEvent):void 
		{
			if (_text == "") {
				tf.text = "";
				tf.textColor = normalColor;
			}
		}
	}

}

用的时候：

new HInputTf(tf,"请输入...",0xcccccc);

需要考虑一些细节问题，比如：提示文字的颜色和输入文字的颜色应该是不一样的；用户可能输入和提示内容一样的文字。所以定义了一个_text变量和两个color变量。

输入内容的时候，TEXT_INPUT事件和CHANGE事件都能触发；删除的时候，CHANGE事件触发，TEXT_INPUT事件不会触发；删除回车的时候，如果上一行有内容，CHANGE事件也不会触发。

源码打包下载