Results 1 to 8 of 8

Thread: removing value on focus

  1. #1
    Join Date
    Feb 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default removing value on focus

    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!

  2. #2
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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.
    Last edited by codeexploiter; 12-08-2009 at 11:59 AM. Reason: correction

  3. #3
    Join Date
    Feb 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 :]

  4. #4
    Join Date
    Feb 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 12-14-2009 at 05:08 PM. Reason: add bit about validity of defaultValue
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Feb 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 12-15-2009 at 07:06 AM. Reason: specificity
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •