用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事件也不会触发。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。