onFocus=this.value=''

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

I am using
Code: [ Select ]
<input type="text" size="20" name="user" value="Username" onFocus=this.value='' />
in my login box, however I want Username to come back when they click back out of the box how do you do this :?: :?:
Javasript is not something I have much experience with.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

You have to check that the box is empty, otherwise it will switch back when they submit the form and prevent logins.

The event you're looking for is the blur event.

Code: [ Select ]
<input type="text" size="20" name="user" value="Username" onfocus="this.value='';"
onblur="this.value=this.value==''?'Username':this.value;"/>
  1. <input type="text" size="20" name="user" value="Username" onfocus="this.value='';"
  2. onblur="this.value=this.value==''?'Username':this.value;"/>
  • Truce
  • Guru
  • Guru
  • Truce
  • Posts: 1477
  • Loc: Washington DC

Post 3+ Months Ago

Actually, you probably want more than what joebert posted, otherwise if they type something in, click something else, and go back to the box it gets deleted. That's not user friendly. Instead you could either highlight everything in the box or just let the normal behavior take over.

It's also a smart idea to put your default text in a different style than the users text so they can more readily distinguish between the two. Additionally, you're going to want to handle the data in the form when it is submitted, else you'll find lots of people searching for your default search box text.

If you use jQuery, the problem is really not too hard:

Code: [ Select ]
var defaultText = 'Search this website!';
 
$(document).ready(function(){
  $('#searchBox').attr("value", defaultText).css('color', '#bbbbbb')
.focus(function(){
    if (defaultText == $(this).attr("value")) {
      $(this).attr("value", "").css('color', '#333333');
    }
  }).blur(function(){
    if ($(this).attr("value") == '') {
      $(this).attr("value", defaultText).css('color', '#bbbbbb');
    }
  });
});
  1. var defaultText = 'Search this website!';
  2.  
  3. $(document).ready(function(){
  4.   $('#searchBox').attr("value", defaultText).css('color', '#bbbbbb')
  5. .focus(function(){
  6.     if (defaultText == $(this).attr("value")) {
  7.       $(this).attr("value", "").css('color', '#333333');
  8.     }
  9.   }).blur(function(){
  10.     if ($(this).attr("value") == '') {
  11.       $(this).attr("value", defaultText).css('color', '#bbbbbb');
  12.     }
  13.   });
  14. });


Once the page loads, the value of the input with the ID of 'searchBox' is set to the default text and the text color is set to a light gray (#BBB). When focus goes to that input, if the value is equal to the default text, the value is set to nothing and the text color is set to a dark gray (#333). When focus leaves that input, if the value is nothing then the default text is automatically put back in and the text color is set to a light gray (#BBB).

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 86 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.