Solved

clearing default text in box, replacing with user entered text

Posted on 2011-03-03
4
302 Views
Last Modified: 2012-05-11
Hello!

I have a text area that accepts some additional instructions from a user. I call it special instructions.

I would like to have it say in grey "Please enter any special instructions here..." and when clicked in, that text would disappear and they could type their instructions (appearing in black). Then if the box is emptied again, it would go back to the grey default text.

Additionally, since it stores the information they enter in php $_SESSION['special_instructions_design_1']

when they come back to the page, to correct an error, for example, I would like what had been filled in previously to be there, and not be considered the default text (not disappear when they click inside to correct a typo or add some content)

Right now I'm working with:

<? $special_instructions = $_SESSION['special_instructions_design_1'] ; if (!isset($special_instructions))  echo "
function clearText1(field)
{
	if (field.defaultValue == field.value) {
	
		field.value = '';
		field.style.color = '#000000';
		
	} else if (field.value == '') {
	
		field.value = field.defaultValue;
		field.style.color = '#999999';
	}
}"?>

Open in new window


<textarea rows="8" id="special_instructions_design_1" <? $special_instructions = $_SESSION['special_instructions_design_1'] ; if (!isset($special_instructions))  echo 'style="color:#999"'?>class="special_instructions" value="Enter username" name="special_instructions_design_1"  onFocus="clearText1(this)" onBlur="clearText1(this)" ><? 
                        if ($_SESSION['special_instructions_design_1']=='') {
                            echo 'Please enter any special instructions here';
                        } else {
                            echo $_SESSION['special_instructions_design_1'];
  }?></textarea>

Open in new window



It's my best guess. Though...it seems not to work. It did work a bit. But I played around with it a bit too much. And I think I broke it...

Does anyone have some advice? Thank you very much!!
0
Comment
Question by:hibbsusan
  • 2
  • 2
4 Comments
 
LVL 6

Accepted Solution

by:
GregArnott earned 500 total points
ID: 35032730
You could try developing this in HTML5. Then the contenteditable attribute could come to the rescue.

You could use a setup similar to http://html5demos.com/contenteditable, then with the 'blur' listener look for whether the content is empty.

ie:
if (this.innerHTML.length == 0 ) {
   this.innerHTML = 'Please enter any special instructions here';
}

Open in new window


As for your code above, you're running into grief by echoing your script only if nothing has been previously saved, thus having nothing operating the onfocus and onblur events.
0
 

Author Comment

by:hibbsusan
ID: 35032793
so in that case, I can simply echo the onFocus onBlur events if the $_SESSION is empty

<? $special_instructions = $_SESSION['special_instructions_design_1'] ; if (empty($special_instructions))  echo 'onFocus="clearText1(this)" onBlur="clearText1(this)"' ?>

Open in new window


Is that bad practice somehow?
Thank you for your help.
0
 
LVL 6

Expert Comment

by:GregArnott
ID: 35045045
The event triggers you're using are inline javascript in a format that was used with IE6. It becomes a 'bad' practice in the sense that it's a very old practice.

The reason I chose the example before with contenteditable, it shows the means for adding Event triggers, without placing them inline and in camelcase (ie: onBlur instead of onblur). These practices lead to web designs which work uniformly and consistently across all browsers, making the job a whole lot easier.

This could be further extended by setting 2 or 3 classes for your textarea design. On first load, or when box is detected empty on blur, then apply the 'grey' style, perhaps even adjusting the border colour to visually show a no answer state and use innerHTML or value to once again inject the default text back into the box. On editing (focus event), you can apply a second style such as a yellow border to highlight their use of that element. Then as they focus away from the text area (blur event or focus other), then go ahead with a final style, such as green border and black text, reinforcing a vlaid answer has been applied.

These 3 styles can be then reused for all input / form fields, by a simple shuffling of classes applied as one uses your form. Furthermore, the same javascript can be used to operate all of these elements through out your site if your clever with class usage.
0
 

Author Comment

by:hibbsusan
ID: 35135473
I see what you mean. Even though I don't *totally* understand javascript on that level. Will doing in the way you suggest make it incompatible with IE6?

I'm sorry it took me so long to respond here!
Thank you for all your help!
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

813 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now