Welcome to WebmasterWorld Guest from 54.146.201.80

Forum Moderators: open

Message Too Old, No Replies

jquery .focus() problem

     
3:43 am on Jun 20, 2011 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 20, 2004
posts: 615
votes: 0


Hello All -

I've got a form where a number of text inputs are optional. All of the "optional" text inputs have a class of .optional.

When the page is loaded I fill each of the ".optional" inputs with the word "Optional". No problem - I've got this working.

What I want to do is when the user gives one of these optional inputs focus, the "Optional" text is removed. Seems pretty simple but I can't get this to work.

My code snippet is shown below:

$(document).ready(function(){
$('input.optional').val('Optional'); // this works
$('input.optional').css('color','#666666'); // this works

if($('input.optional').focus()) {
var inputId = $(this).attr('id');
$('input#' + inputId).val('');
$('input#' + inputId).css('color','#000000');
};
});

Can someone please tell me where I'm going wrong?

Neophyte
6:05 am on June 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
posts:1585
votes: 0


why

var inputId = $(this).attr('id');
$('input#' + inputId).val('');
$('input#' + inputId).css('color','#000000');

instead of

$(this).val('');
$(this).css('color','#000000');

Not sure that will fix it, but less to go wrong, like element not having an id.
8:11 am on June 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


if($('input.optional').focus()) {


This looks like it will actually trigger the focus event (immediately when the document loads). You need to assign (bind) a function to the focus event handler that will then be called later when the elements actually receive focus.

Replace this...
if($('input.optional').focus()) {
var inputId = $(this).attr('id');
$('input#' + inputId).val('');
$('input#' + inputId).css('color','#000000');
};


With something like...
$('input.optional').focus(function() {  
var inputId = $(this).attr('id');
$(this).val('');
$(this).css('color','#000000');
});


Once you are in an event handler the 'this' keyword refers to the object/element that triggered the event. In the context you had it in your original code, 'this' would refer to the global object.
4:15 pm on June 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


You don't even need to access the ID. You need to assign functions to the objects, like penders shows, but here's another way (also handles blur.) This is typed on the fly and may need some twiddling, but look at the difference.

$(document).ready(function(){
$('input.optional').val('Optional'); // this works
$('input.optional').css('color','#666666'); // this works
//
$('input.optional').focus(function() {
$(this).val('');
$(this).css('color','#000000');
});
$('input.optional').blur(function() {
if ($(this).val()=='') {
$(this).val('Optional');
$(this).css('color','#666666');
}
});
});


You may need to store the value in a temporary variable for evaluation, but don't think so:


$('input.optional').blur(function() {
var v = $(this).val();
if (v=='') {
$(this).val('Optional');
$(this).css('color','#666666');
}
});
2:50 am on June 24, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
posts:3145
votes: 12


I thought you were trying to learn to use JavaScript? Don't use jQuery, it relies on undependable proprietary Microsoft methods such as innerHTML. It's not cross-browser compatible. It's also depended on so badly that it's extremely easy to encounter a situation with two or more independent copies of jQuery which not only wastes more of the client and server bandwidth though introduces further dependencies making it even easier to break the code with a patch. So stick to using real JavaScript you wouldn't . Here is a quick solution that you can evolve in to something for what you need and it won't utterly alienate dial-up and mobile users with a 70KB jQuery download...

- John

var my_id = document.getElementById('form_id_1');

my_id.addEventListener('focus',function() {clear_value('my_id');},false);

function clear_value(id)
{
if (document.getElementById(id))
{
document.getElementById(id).value = '';
}
}
8:21 am on June 24, 2011 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 20, 2004
posts: 615
votes: 0


DaveV, Penders and Rocknbil:

Thanks to you all very much for your clear examples and options.

I'm finally over this hurdle and now on to a multiple submit button question on another post.

Thanks again!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members