SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery: textarea - 'Write a comment...' and 'What's on your mind?' like facebook

    Hi,

    I would like to know how to make a textarea like the ones in facebook, which they always have default text 'Write a comment...' or 'What's on your mind?' - they will disappear when u click on the textarea, but they will change back to default when u click outside the textarea again...

    hope you understand i am trying to explain above.

    any online references please...?

    many thanks,
    Lau

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This should work:
    Code javascript:
    $('textarea').focus(function() {
      if ($(this).val() === 'Hello') $(this).val('');
    });
    $('textarea').blur(function() {
      if ($this.val() === '') $(this).val('Hello');
    });

  3. #3
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    This should work:
    Code javascript:
    $('textarea').focus(function() {
      if ($(this).val() === 'Hello') $(this).val('');
    });
    $('textarea').blur(function() {
      if ($this.val() === '') $(this).val('Hello');
    });
    hi, thanks for this code. i have just tried it but it doesnt work on my test page im afraid...

    here is the test page,
    http://lauthiamkok.net/tmp/autogrow/

    something i have done wrong??

  4. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You forgot to set a default value such as "Write a comment...", before the focus event handler gets invoked which can be done in JS or the HTML.
    Cross browser css bugs

    Dan Schulz you will be missed

  5. #5
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    You forgot to set a default value such as "Write a comment...", before the focus event handler gets invoked which can be done in JS or the HTML.
    got it! thank you.

    there is a small problem still... the default disappears when i click inside the textarea which is i would like to have, but when i click outside to the textarea again, the default text wont come back... how can i do this, something i havent set again??

    thanks.

  6. #6
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    got the answer!

    it is

    if ($(this).val() === '') $(this).val('Hello');

    not

    if ($this.val() === '') $(this).val('Hello');

    thanks guys!

  7. #7
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry.... i found another problem... here is my code,

    Code:
    $(document).ready(function(){
    	$('textarea').val('Hello');		
    	$('textarea').focus(function() {
    		if ($(this).val() === 'Hello') $(this).val('');
    	});
    	$('textarea').blur(function() {
    		if ($(this).val() === '') $(this).val('Hello');
    		if ($(this).val() === '\n') $(this).val('Hello');		
    	});	
    
    });
    i only manage to turn the default value back when,

    1. the input in the textarea is empty
    2. the input in the textarea has a '\n'

    but i cannot turn the default value back if there are tons of '\n'!

    how can i fix this please??

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oh, my mistake with the $this instead of $(this), oops! Try using $.trim:
    Code javascript:
    $(document).ready(function(){
    	$('textarea').val('Hello');		
    	$('textarea').focus(function() {
    		if ($(this).val() === 'Hello') $(this).val('');
    	});
    	$('textarea').blur(function() {
    		if ($.trim($(this).val()) === '') $(this).val('Hello');	
    	});	
     
    });

  9. #9
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Oh, my mistake with the $this instead of $(this), oops! Try using $.trim:
    Code javascript:
    $(document).ready(function(){
    	$('textarea').val('Hello');		
    	$('textarea').focus(function() {
    		if ($(this).val() === 'Hello') $(this).val('');
    	});
    	$('textarea').blur(function() {
    		if ($.trim($(this).val()) === '') $(this).val('Hello');	
    	});	
     
    });
    yes $.trim is perfect! thank you very much.

  10. #10
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Final spin on it:

    Code:
    <textarea id="textarea-comment"></textarea>
    <script>
    $(function() {
        var defaultText = 'Hello';
        $('#textarea-comment')
    	.val(defaultText)
    	.focus(function() {
    	    if ( this.value == defaultText ) this.value = ''
    	})
    	.blur(function() {
    	    if ( !$.trim( this.value ) ) this.value = defaultText
    	});
    });
    </script>
    Cross browser css bugs

    Dan Schulz you will be missed

  11. #11
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Final spin on it:

    Code:
    <textarea id="textarea-comment"></textarea>
    <script>
    $(function() {
        var defaultText = 'Hello';
        $('#id')
    	.val(defaultText)
    	.focus(function() {
    	    if ( this.value == defaultText ) this.value = ''
    	})
    	.blur(function() {
    	    if ( !$.trim( this.value ) ) this.value = defaultText
    	});
    });
    </script>
    it looks fantastic! thank you very much!

  12. #12
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made a slight adjustment, remember to have the right ID when selecting,
    Cross browser css bugs

    Dan Schulz you will be missed

  13. #13
    SitePoint Evangelist
    Join Date
    Dec 2008
    Location
    Plymouth, United Kingdon
    Posts
    449
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    I made a slight adjustment, remember to have the right ID when selecting,
    yes i notice that - thank you


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
  •