Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 314
  • Last Modified:

clearing default text in box, replacing with user entered text


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!!
  • 2
  • 2
1 Solution
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.
hibbsusanAuthor Commented:
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.
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.
hibbsusanAuthor Commented:
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now