disappearing and reappearing text in textbox

@jcubedApr 26.2008

Ok, I know this has been solved multiple times, but if you read everything first, you’ll see y mine is different. I want to make the default text in a textbox disappear when onFocus. I have achieved this within the onFocus attribute in the input tag, but I want to use this code across multiple documents. So I set out to make a .js file. Unfortunately, that’s where everything went wrong. For some reason, I can’t get the disappearing text to work now.

import code:

[CODE]<script language=”JavaScript” src=”main.js”></script>[/CODE]

main.js code:

[CODE]<!– BEGIN JAVASCRIPT FILE function disappear(formName,inputName) { if(document.formName.inputName.value == “Enter a search term…”) document.formName.inputName.value = “”; } … END JAVASCRIPT FILE –>[/CODE]

input line:

[CODE]<input type=”text” name=”search” value=”Enter a search term…” style=”color: #777777;” onFocus=”disappear(‘searchForm’,’search’);” onBlur=”reappear(‘searchForm’,’search’);”>[/CODE]

Thanks much for any help. The page it should be working on is jeff.jcubedtech.com if u need to see that.

to post a comment

JavaScript

12 Comments(s) _↴

@Logic_AliApr 26.2008 — #

&lt;!-- BEGIN JAVASCRIPT FILE
 function disappear(formName,inputName)
 {
 if(document.formName.inputName.value == "Enter a search term...")
 document.formName.inputName.value = "";
 }
 ...
 END JAVASCRIPT FILE --&gt;

The page it should be working on is jeff.jcubedtech.com if u need to see that.
[/quote]I can see an error indicated in the console.

You must remove the HTML comments from the .js file. To simplify things, I would suggest this code:

<i>
 </i>
 function defaultToggle(elem, action)
 {
 if(action)
 { 
 if(this.value == this.defaultValue)
 this.value='';
 }
 else
 if( !this.value.match(/S/) )
 this.value=this.defaultValue;
 }

HTML:

<i>
 </i>&lt;input type="text" name="search" value="Enter a search term..."
 style="color: #777777;" onfocus="defaultToggle(this, true);"
 onblur="defaultToggle(this, false);"&gt;

@JMRKERApr 26.2008 — #I'm not sure if this is your intent, but I took a slightly different approach.

Extract the internal JS and put as your external JS file.

[code=php]
 <html>
 <head>
 <title>Dissappear/Reappear Test</title>
 
 <script type="text/javascript">
 // From: // http://www.webdeveloper.com/forum/showthread.php?t=179955
 
 // BEGIN JAVASCRIPT FILE
 function disappear(inputName) {
 if (document.getElementById(inputName).value == "Enter a search term...") {
 document.getElementById(inputName).value = "";
 }
 }
 function reappear(inputName)	{
 if (document.getElementById(inputName).value == "") {
 document.getElementById(inputName).value = "Enter a search term...";
 }
 }
 // END JAVASCRIPT FILE
 </script>
 </head>
 <body>
 
 <form name='searchForm'>
 <input type="text" id='SEARCH' name="search" value="Enter a search term..." style="color: #777777;"
 onFocus="disappear(this.id);" onBlur="reappear(this.id);">
 </form>
 
 </body>
 </html>
 [/code]

@jcubedauthorApr 26.2008 — #That seems like it will work, but I have just a few questions.

Where is defaultValue defined?

If the function is in an external file, will "this".whatever work? I was under the impression that the command "this" only worked inside the input tag.

I've never used the match method, what does it do? And what is "/s/"? I'm guessing "s" is an escape character, right?

Thanks for the note about the comments, I read on another page that they were necessary in external pages, but I'll remove them.

@jcubedauthorApr 26.2008 — #Thanks JMRKER, but I just copy & pasted your code and tried that, but alas it didn't work.

@Logic_AliApr 26.2008 — #That seems like it will work, but I have just a few questions.

Where is defaultValue defined?[/quote]It's a standard property.
If the function is in an external file, will "this".whatever work? I was under the impression that the command "this" only worked inside the input tag.[/quote]Don't think of code as being 'in' an external file; it is imported into and becomes a part of the document, just as if it had been written in the document. [I]this [/I]is a reference to the object currently in scope; in an element's event handler it refers to the element.
I've never used the match method, what does it do? And what is "/s/"? I'm guessing "s" is an escape character, right?[/quote]It's /S/, which is a regular expression matching a non-whitespace character.

[URL]http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:String:match[/URL]

[URL]http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:RegExp[/URL]
Thanks for the note about the comments, I read on another page that they were necessary in external pages[/quote]They're no longer necessary anywhere.

@jcubedauthorApr 26.2008 — #Thanks for the quick reply. I tried copying your code exactly, but still it does not work. How do you simply print something out with javascript, because then I can debug my file. I have a sinking feeling that for some reason I am not importing it.

Edit: Please view jeff.jcubedtech.com if you would like to see the context. It is the searchbar in the top-right. The js file is in the root directory under the name main.js. The name of the file that the input tag is under is "visuals.inc," it's also in the root directory.

@JMRKERApr 26.2008 — #Thanks JMRKER, but I just copy & pasted your code and tried that, but alas it didn't work.[/QUOTE]

What doesn't work? What does or does not happen?

What are the error messages?

I just checked in FF and IE, and both work fine. ?

@Logic_AliApr 26.2008 — #Thanks for the quick reply. I tried copying your code exactly, but still it does not work. How do you simply print something out with javascript, because then I can debug my file. I have a sinking feeling that for some reason I am not importing it.

Edit: Please view jeff.jcubedtech.com if you would like to see the context. It is the searchbar in the top-right. The js file is in the root directory under the name main.js. The name of the file that the input tag is under is "visuals.inc," it's also in the root directory.[/quote]OK I forgot it wouldn't work in an inline handler. This will :

<i>
 </i>function defaultToggle(elem, action)
 {  <br/>
 if(action)
 { 
 if(elem.value == elem.defaultValue)
 elem.value='';
 }
 else
 if( !elem.value.match(/S/) )
 elem.value=elem.defaultValue;
 }

@Declan1991Apr 26.2008 — #To fix your original, all you had to do was:

[code=php]function disappear(formName,inputName)
 {
 if(document[formName][inputName].value == "Enter a search term...")
 document[formName][inputName].value = "";
 }[/code]

So you can either call things like document.formName either:

[code=php]
 document.formName[/code]

or [code=php]document["formName"][/code]
Note that the value of the second way is a string, and that is why it can be dynamic, that is to say, that you needn't know the formName in advance.

@NedalsApr 27.2008 — #Why so complicated?

html

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html&gt;&lt;head&gt;&lt;title&gt;untitled&lt;/title&gt;&lt;/head&gt;
 &lt;body&gt;
 ...
 &lt;form&gt;
 &lt;input type="text" name="search" id="search" value="Enter a search term..." onfocus="disappear('')" onblur="disappear('Enter a search term...')"&gt;
 &lt;/form&gt;
 ...
 &lt;/body&gt;
 &lt;/html&gt;

main.js

<i>
 </i>function disappear(val) {
 document.getElementById('search').value = val;
 }

Of course, I have no idea why you would want to do this.

When you try to submit the form, it will ALWAYS reset to 'Enter a search term...'

@jcubedauthorMay 07.2008 — #Sorry about taking so long to reply to this, I guess I just got caught up in other things, plus I stopped getting emails whenever somebody replied for some reason. Logic Ali's second method was what I used. He was right, the problem was the call to "this" in the external function. This is why I originally questioned the use of "this" in an external function. It took me a while to realize that I was already passing the element to the function anyways, and when I finally did realize that it was a very simple solution. I didn't actually realize you (Logic Ali) fixed that until just now. Thanks everybody for your help.

@jcubedauthorMay 07.2008 — #I currently have another issue in a separate part of code. I need to make an if statement that uses javascript. Any ideas? Here's the current code. I thought your php["formname"] might be able to help me.

[CODE]$data = '';
 if( (document.getElementById($array[4]).style.display) == "none" )
 $data = 'Open';
 else
 $data = 'Collapse';[/CODE]

I get a fatal call to undefined function error when I try to run the page.

Also in #JavaScript _↴

Uploading a file Java form error make a dynamic URL shorter?

Success!

Help @jcubed spread the word by sharing this article on Twitter...

Tweet This

disappearing and reappearing text in textbox

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

disappearing and reappearing text in textbox

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴