?
Solved

clearing default text in box, replacing with user entered text

Posted on 2011-03-03
4
Medium Priority
?
309 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
[X]
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
  • 2
  • 2
4 Comments
 
LVL 6

Accepted Solution

by:
GregArnott earned 2000 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

770 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