really simple javascript to remove value in text box

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?

Answers


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/


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?


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


Need Your Help

Calling protected method in itcl

tcl

I am learning tcl. I am creating a class and writing a protected method. I am trying to call protected method using object but i am getting error

Is it possible to use more than maximum android heap?

java android heap

Why 1 or 2gb RAM is needed in android device if a single application can use only 32mb-heap? I cannot load big images into RAM, for example 3000x3000 (it is only 34mb).

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.