CODEWITHSUNDEEP
javascriptjquery
Ladybro
Ladybro

Reputation: 806

jQuery $().focus not working

I'm trying to use jQuery's focus() method and I don't understand why it's not working. Here's a fiddle: http://jsfiddle.net/3RGRv/4/

When you press "Ready to rock", the button handler is called and, inside of it, $('#playlistNameInput').focus();

The console logs messages acknowledging that this was reached and processed, but still no focus happens. Any idea why this is?

Upvotes: 1

Views: 884

Answers (2)

knrz
knrz

Reputation: 1811

You're first problem is that in #step1 you've got random button end tags. Inputs are self-closing.

Here's the cleaned-up version for step 1 and 2: 

// Step 1
<input id="playlistNameInput" size="10">
that has at least <input id="totalHours" size="2"> hours and
<input id="totalMins" size="2"> minutes of music.</p> 
// Step 2
<input id="songTitle" placeholder="Title">
<input id="songArtist" placeholder="Artist">
<input id="songMinutes" placeholder="Minutes">
<input id="songSeconds" placeholder="Seconds">

Second, when you click "Ready to Rock", it takes you to #step2, which doesn't have #playlistNameInput.

Finally, move $('#playlistNameInput').focus() into the fadeOut so that it gets run after the next step is faded in.

$("#prompt").fadeOut('10000', function()
{
   $("#step1").css("visibility", "visible").hide().fadeIn('slow');
   $('#playlistNameInput').focus();
});

Done. Here's the cleaned-up, working fiddle.

Upvotes: 0

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

use this 

 setTimeout(function(){$('#playlistNameInput').focus();},500);

Upvotes: 1

Related Questions