Solved

Text formatting disappears when I clear my textfield

Posted on 2013-06-04
10
371 Views
Last Modified: 2013-06-17
Hey there.

Hope someone can help me here..

I have a textfield with some defaultTextFormat – if the user hasn't typed anything in the textfield the textfield will have the following text: "Write caption here.." - this text is in grey.

What I want is that if the user clicks the textfield the text goes away and the text color changes to black when the user starts typing. The annoying thing is that If I keep one character in the textfield it changes the color correctly to black, but if I clear the textfield as I want to the new textFormat is not applied.

Please have a look at the code here:

// activate caption textfield
		private function activateCapTxtFld(e:FocusEvent):void {
			trace("activateTxtFld: captionNotSet = "+captionNotSet);
			if(captionNotSet) {
				captionTxt.text = "test"; // the new textformat is applied
				//captionTxt.text = ""; // the new textformat is NOT applied
				var TF:TextFormat = new TextFormat();
				TF.color = 0x000000;
				captionTxt.setTextFormat(TF);
			}
			e.target.removeEventListener(FocusEvent.FOCUS_IN, activateCapTxtFld);
		}

Open in new window



I hope someone can help me on this..

Thanks..
0
Comment
Question by:RapperOnStep
  • 5
  • 3
10 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39226197
Without a link to the page so we can see what is happening, there is nothing we can do but guess.  My guess is that the text is a placeholder in a textarea, and the behavior you are describing in the native implementation in a modern browser, and AFAIK it is not overridable.

Cd&
0
 

Author Comment

by:RapperOnStep
ID: 39231248
hey Cd&.

Thanks for your answer. Just cleaned up the coding and attaching an example here with all the code neccessary. I hope you can help me shine some light on this problem.

package {
	
	import flash.display.*;
	import flash.events.*;
	import flash.text.TextFormat;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.AntiAliasType;
	import flash.events.FocusEvent;
	
	
	public class setSelection2 extends MovieClip {
		
		private var captionNotSet:Boolean;
		private var headlineNotSet:Boolean;
		private var captionTxtFormat:TextFormat;
		private var headlineTxtFormat:TextFormat;
		private var defaultTxtFormat:TextFormat;
		public var headlineTxtFld:TextField;
		public var captionTxt:TextField;
		private var caption:String;
		private var headline:String;
		
		
		public function setSelection2() {
			setDefaultTxt();
			addCaptionTxtFld();
		}
		private function setDefaultTxt():void {
			caption = "Write caption here..";
			captionNotSet = true;
		}
		
		private function setDefaultTxtFormat(textIsNotSet:Boolean):void {
			
			trace("setDefaultTxtFormat");
			defaultTxtFormat = new TextFormat();
			defaultTxtFormat.font = "Georgia";
			defaultTxtFormat.size = 16;
			if(textIsNotSet) {
				defaultTxtFormat.color = 0x666666;
			}
			else {
				defaultTxtFormat.color = 0x000000;
			}
			
		}
		
		
		
		// addCaptionTxtFld
		private function addCaptionTxtFld():void {
			captionTxt = new TextField();
			captionTxt.type = TextFieldType.INPUT;
			captionTxt.height = 55;
			captionTxt.background = true;
			captionTxt.border = true;
			captionTxt.wordWrap = true;
			captionTxt.antiAliasType = AntiAliasType.ADVANCED;
			captionTxt.width = 500;
			captionTxt.height = 300;
			captionTxt.x = 20;
			captionTxt.y = 20;
			captionTxt.htmlText = caption;
			setDefaultTxtFormat(captionNotSet);
			captionTxt.setTextFormat(defaultTxtFormat);
			captionTxt.addEventListener(FocusEvent.FOCUS_IN, activateCapTxtFld);
			addChild(captionTxt);
			captionTxt.defaultTextFormat = defaultTxtFormat;
		}
		
		
		// activate caption textfield
		private function activateCapTxtFld(e:FocusEvent):void {
			if(captionNotSet) {
				//captionTxt.text = "test"; // the new textformat is applied
				captionTxt.text = ""; // the new TF textformat is NOT applied
				var TF:TextFormat = new TextFormat();
				TF.color = 0x000000;
				TF.size = 20;
				captionTxt.setTextFormat(TF);
			}
			e.target.removeEventListener(FocusEvent.FOCUS_IN, activateCapTxtFld);
		}
		
		
	}
}

Open in new window

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39242004
Still waiting for a link.

Cd&
0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

Author Comment

by:RapperOnStep
ID: 39242136
Why do u need a link? I posted all the code to make it easier..
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39242180
Fine. I am moving on to other things.  Good luck finding an answer.

Cd&
0
 

Author Comment

by:RapperOnStep
ID: 39242458
Wauw... I'm not an expert - that's why I'm asking.
0
 

Accepted Solution

by:
RapperOnStep earned 0 total points
ID: 39243818
I solved it myself. Strange behaviour - I never posted a link in here before. Always just the code.

Here is the solution:

package 
{

	import flash.display.*;
	import flash.events.*;
	import flash.text.TextFormat;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.AntiAliasType;
	import flash.events.FocusEvent;


	public class setSelection2 extends MovieClip
	{

		private var captionNotSet:Boolean;
		private var headlineNotSet:Boolean;
		private var captionTxtFormat:TextFormat;
		private var headlineTxtFormat:TextFormat;
		private var defaultTxtFormat:TextFormat;
		public var headlineTxtFld:TextField;
		public var captionTxt:TextField;
		private var caption:String;
		private var headline:String;


		public function setSelection2()
		{
			setDefaultTxt();
			addCaptionTxtFld();
		}
		private function setDefaultTxt():void
		{
			caption = "Write caption here..";
			captionNotSet = true;
		}

		private function setDefaultTxtFormat(textIsNotSet:Boolean):void
		{

			defaultTxtFormat = new TextFormat();
			defaultTxtFormat.font = "Georgia";
			defaultTxtFormat.size = 16;
			defaultTxtFormat.color = 0x666666;
		}



		// addCaptionTxtFld
		private function addCaptionTxtFld():void
		{
			captionTxt = new TextField();
			captionTxt.type = TextFieldType.INPUT;
			captionTxt.height = 55;
			captionTxt.background = true;
			captionTxt.border = true;
			captionTxt.wordWrap = true;
			captionTxt.antiAliasType = AntiAliasType.ADVANCED;
			captionTxt.width = 500;
			captionTxt.height = 300;
			captionTxt.x = 20;
			captionTxt.y = 20;
			captionTxt.htmlText = caption;
			setDefaultTxtFormat(captionNotSet);
			captionTxt.setTextFormat(defaultTxtFormat);
			captionTxt.addEventListener(MouseEvent.CLICK, activateCapTxtFld);
			addChild(captionTxt);
			captionTxt.defaultTextFormat = defaultTxtFormat;
		}


		// activate caption textfield
		private function activateCapTxtFld(e:MouseEvent):void
		{
			if (captionNotSet) {
				captionTxt.text = " ";
				var newformat:TextFormat = new TextFormat();
				newformat.color = 0x000000;
				captionTxt.setTextFormat(newformat);
				captionTxt.setSelection(0,0);
			}
			e.target.removeEventListener(MouseEvent.CLICK, activateCapTxtFld);
		}


	}
}

Open in new window

0
 

Author Closing Comment

by:RapperOnStep
ID: 39252629
For some reason I didn't get a solution from an expert so I had to solve it myself :(
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Computer science students often experience many of the same frustrations when going through their engineering courses. This article presents seven tips I found useful when completing a bachelors and masters degree in computing which I believe may he…
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question