removing value on focus

**noholdsbarned** · 12-08-2009, 10:40 AM

Hi all,

Had this working for a while, but suddenly stopped functioning correctly. Been staring at the code for too long and I feel that I might be overlooking my problem.

Basically I want the value of the field to disappear once in focus, and to reappear when not in focus (assuming the user did not input anything... if they did, that value they inputted will remain)

my code:

Code:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js">
</script>
<script type="text/javascript">
$(function() {
 $('input, textarea').each(function() {  
  $(this).focus(function() { 
   if($(this).val() == this.defaultValue) 
     $(this).val(""); 
   }); 
   $(this).blur(function() { 
     if($(this).val() == "")      $(this).val(this.defaultValue); 
   }); 
 });
});
</script>

This is implemented here: http://effortlessgent.com

Any suggestions you may have would be greatly appreciated... I'm sure it's something small since this functionality was just working. sigh.

Thanks!

**codeexploiter** · 12-08-2009, 11:58 AM

I have prepared a small demo for your purpose. I am not sure why did you use the each function for this operation, which is not necessary for this.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
               $("textarea.a").focus(function(){
			   	var value = jQuery.trim($(this).get(0).value);
				var defaultValue = jQuery.trim($(this).get(0).defaultValue);				
				if(value === defaultValue){
					$(this).get(0).value = "";
				}
			   });
			   
			   $("textarea.a").blur(function(){
			   	var value = jQuery.trim($(this).get(0).value);
				var defaultValue = jQuery.trim($(this).get(0).defaultValue);
				if(value !== defaultValue && value === ""){
					$(this).get(0).value = defaultValue;
				}
			   });
            });
        </script>
    </head>
    <body>
        <form>
            <textarea class="a" name="t1" id="t1" rows="8" cols="50" defaultValue="Click to enter the text1">Click to enter the text1</textarea>
			<textarea class="a" name="t2" id="t2" rows="8" cols="50" defaultValue="Click to enter the text2">Click to enter the text2</textarea>
			<textarea class="a" name="t3" id="t3" rows="8" cols="50" defaultValue="Click to enter the text3">Click to enter the text3</textarea>
			<textarea class="a" name="t4" id="t4" rows="8" cols="50" defaultValue="Click to enter the text4">Click to enter the text4</textarea>			
        </form>
    </body>
</html>

In this example I have used a class name to gather all the textarea that I want. The value of the textareas will be changed only if the user inserts anything otherwise when the user clicks on the textarea the default text will be removed and it will be retained if the user leaves the element without any input.

Hope this helps.

**noholdsbarned** · 12-13-2009, 06:33 PM

Thanks for your reply on this. Wondering if it would be possible to target several elements (say input, as well as textarea) and be able to target all of those elements, so as to avoid having to add classes to all of them?

appreciate the demo and the explanation :]

**noholdsbarned** · 12-13-2009, 07:38 PM

nevermind, spoke too soon. I seemed to have figured it out: http://www.effortlessgent.com

Instead of utilizing classes I simply used:

Code:

$('input, textarea').each(function() {

to target both input and textareas. Do you see any potential problems by doing that?

Also, if anyone stumbles on this and is using wordpress, I had

Code:

<?php wp_head(); ?>

at the bottom of my head tag, so I moved it up higher in the head, and also used the same call to the jquery library that my theme uses:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

I replaced my original call to 1.3.1 for the function to this one I just posted above. Seems to have solved my issue.

**codeexploiter** · 12-14-2009, 10:35 AM

Here is the code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
               $(":input[type=text], :input[type='textarea']").focus(function(){
			   	var value = jQuery.trim($(this).get(0).value);
				var defaultValue = jQuery.trim($(this).get(0).defaultValue);				
				if(value === defaultValue){
					$(this).get(0).value = "";
				}
			   });
			   
			   $(":input[type=text], :input[type='textarea']").blur(function(){
			   	var value = jQuery.trim($(this).get(0).value);
				var defaultValue = jQuery.trim($(this).get(0).defaultValue);
				if(value !== defaultValue && value === ""){
					$(this).get(0).value = defaultValue;
				}
			   });
            });
        </script>
    </head>
    <body>
        <form>
            <textarea class="a" name="t1" id="t1" rows="8" cols="50" defaultValue="Click to enter the text1">Click to enter the text1</textarea>
			<textarea class="a" name="t2" id="t2" rows="8" cols="50" defaultValue="Click to enter the text2">Click to enter the text2</textarea>
			<textarea class="a" name="t3" id="t3" rows="8" cols="50" defaultValue="Click to enter the text3">Click to enter the text3</textarea>
			<textarea class="a" name="t4" id="t4" rows="8" cols="50" defaultValue="Click to enter the text4">Click to enter the text4</textarea>
			<input name="t5" id="t5" defaultValue="Click to enter the input1" value="Click to enter the input1">
        </form>
    </body>
</html>

The problem that I am seeing is you have included all the input components for this operation. I mean not only text but all the elements that uses text. If you need to avoid any one particular form input element you have to alter your code.

I prefer to think from what is my exact requirement rather than going for a generic approach.

Hope this helps.

**jscheuer1** · 12-14-2009, 05:03 PM

Going a bit wild with that code, codeexploiter, perhaps. This should do the same thing:

Code:

        <script type="text/javascript">
            $(function(){
               $(":text, textarea").focus(function(){
				if($.trim(this.value) === $.trim(this.defaultValue)){
					this.value = "";
				}
			   }).blur(function(){
			   	var value = $.trim(this.value);
				if(value !== $.trim(this.defaultValue) && value === ""){
					this.value = this.defaultValue;
				}
			   });
            });
        </script>

Though I still prefer the:

Code:

jQuery(function($){

to the:

Code:

$(function(){

as it makes jQuery code by default into a sort of light noConflict mode, and can easily be made into full noConflict mode with:

Code:

jQuery.noConflict(function($){

All of which perform the same primary functionality (execute on document ready) of:

Code:

$(document).ready(function(){

Unfortunately though, I believe the defaultValue attribute has been deprecated. As far as I know, there is no easy valid workaround for that, though most browsers still support it.

**noholdsbarned** · 12-15-2009, 05:29 AM

Thanks both for your detailed input. I tried each solution and they both solve my problem. Jscheuer's solution seems more succinct of course. Appreciate all the explanations!

**jscheuer1** · 12-15-2009, 06:50 AM

More on defaultValue. I did a little research, and it appears as though it was always an invalid attribute. But it is, as far as I can tell, a valid property of any input element that may have a value attribute, as well as of any textarea. It begins its life as the value (if any, otherwise an empty string) hard coded as the element's value attribute (or, in the case of a textarea, the value shown between its opening and closing tags) and may be accessed or changed via javascript. I tested this in more than several browsers, and it seems to hold true. So we may rewrite our page:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js">
        </script>
        <script type="text/javascript">
            jQuery(function($){
               $(":text, textarea").focus(function(){
				if($.trim(this.value) === $.trim(this.defaultValue)){
					this.value = "";
				}
			   }).blur(function(){
			   	var value = $.trim(this.value);
				if(value !== $.trim(this.defaultValue) && value === ""){
					this.value = this.defaultValue;
				}
			   });
            });
        </script>
    </head>
    <body>
        <form action="#">
          <div>
            <textarea name="t1" id="t1" rows="8" cols="50">Click to enter the text1</textarea>
            <textarea name="t2" id="t2" rows="8" cols="50">Click to enter the text2</textarea>
            <textarea name="t3" id="t3" rows="8" cols="50">Click to enter the text3</textarea>
            <textarea name="t4" id="t4" rows="8" cols="50">Click to enter the text4</textarea>
            <input name="t5" id="t5" value="Click to enter the input1">
          </div>
        </form>
    </body>
</html>

And it will still work, as well as validate strict.

Thread: removing value on focus

Thread Tools

Search Thread

removing value on focus

Bookmarks

Bookmarks

Posting Permissions