clearing default text in box, replacing with user entered text

Posted on 2011-03-03
Last Modified: 2012-05-11

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 = ''; = '#000000';
	} else if (field.value == '') {
		field.value = field.defaultValue; = '#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'];

Open in new window

It's my best guess. 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!!
Question by:hibbsusan
  • 2
  • 2

Accepted Solution

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, then with the 'blur' listener look for whether the content is empty.

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.

Author Comment

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.

Expert Comment

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.

Author Comment

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!

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

914 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

16 Experts available now in Live!

Get 1:1 Help Now