Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

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 = '';
		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'];

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!!
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 http://html5demos.com/contenteditable, 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery on Submit 4 37
PHP and MSSQL Arrays and Variables 3 22
HowTo set a global variable in javascript or jQuery 4 21
JS Event Does not Trigger From File 2 23
This article discusses how to create an extensible mechanism for linked drop downs.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

809 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