really simple javascript to remove value in text box

Question

iv got a really simple javascript question. Ill be using query for parts of it here but there are akin ways of doing it via javascript. basically, I'm writing a little script that makes it so when you click a text box with a value in it, it will take out the value so your can type (ex for most username boxes they have a little note in there). there are probably much better ways of doing this (i can already think of some) so feel free to suggest them as well. anyways I got that part running easily, the problem is that whenever a user clicks again all the data is removed, so if they just want to adjust something they can't. to solve this (ill show code in sec) i put a check variable and an if. this is what it looks like. (it doesn't work, btw)

var unumber = 0;
var pnumber = 0; 

 if(unumber<1){
  $('#username').click(function(){
  unumber = 1;
  $('#username').val('');
 });
 };

 if(pnumber<1){
   $('#password').click(function(){
   $('#password').val('');
   pnumber = 1;
   });
 };

what I'm assuming happens is that every time some one clicks the variables are reset, and this leads to a more general question if this is this case, why would the whole script, not just the event handler, run? Im new to javascript so forgive me if this is a stupid question. Anyways, this is a really simple script and there are better and more efficient ways to do it, but how can it be done this way?

Answer 1

Your check for number less than 1, should be within the click handler

var unumber = 0;
var pnumber = 0; 

$('#username').click(function(){
  if(unumber<1){
    unumber = 1;
    $('#username').val('');
  }
});

$('#password').click(function(){
  if(pnumber<1){
     pnumber = 1;
     $('#password').val('');
  }
});

Note that this is not very robust, it doesn't handle tabbing into the fields. To fix that, handle the focus event.

Another problem is that you don't get the message back if you don't type anything and leave the field. A better approach is to compare against the initial value when the field receives focus. If there's nothing in there when you leave the field, restore to the original value.

Here's a jQuery plugin for creating these placeholders : https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

Also, newer browsers support a placeholder attribute that does exactly that http://www.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/

Answer 2

I'd say the best way of doing this is to have a clear button inside the text input. See here for an example : How do I put a clear button inside my HTML text input box like the iPhone does?

Answer 3

No need for the messy number checking, use data on the element in question

This should work for you.

$('#username,#password').focus(function(){
  if(!$(this).data('seen')) {
    $(this).data('seen',true);
    $(this).val('');
  }
});

http://jsfiddle.net/DeZ7D/

You could store the placeholder and replace back on blur if the user hasn't entered anything. more detailed implementation here:

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html