How do you set focus to a particular input box?

Board index » YUI 2.x: » Using YUI 2.x Components

Page 1 of 2

[ 12 posts ]

Go to page 1, 2 Next

New Topic | Post Reply | Print view

Previous topic | Next topic

jamesmoorecode

Joined: Wed Nov 18, 2009 9:12 am
Posts: 11

Tags:

dialog

How do you set focus to a particular input box?

Posted: Wed Nov 18, 2009 9:15 am

+0-

What's the right way (YUI 2) to set the focus to a particular input box in a dialog so the user can start typing right away? The doc talks about button focus, but not about input focus.

(I'd also like 'return' to submit the form once the user has finished filling in the input boxes, but I think this isn't the same issue)

Matt Parker

YUI Contributor

Username: mattatlamplight
Joined: Mon Apr 20, 2009 12:03 pm
Posts: 466
Location: London UK
GitHub: mattparker
Gists: mattparker

Re: How do you set focus to a particular input box?

Posted: Wed Nov 18, 2009 9:20 am

+0-

Can't you do

YAHOO.util.Dom.get("first_element").focus();

after the form's loaded?

Although I'm having issues with this right at the moment, may not be the best person to listen to!

jamesmoorecode

Joined: Wed Nov 18, 2009 9:12 am
Posts: 11

Re: How do you set focus to a particular input box?

Posted: Wed Nov 18, 2009 9:27 am

+0-

Yes, but I assumed that since there were methods provided to set the default buttons, there probably was a correct way to set the default input as well. I assumed I was just missing something.

Satyam

YUI Contributor

Username: Satyam
Joined: Tue Dec 09, 2008 12:34 am
Posts: 2016
Location: Sitges, Spain
GitHub: Satyam
Gists: Satyam
IRC: DevaSatyam

Re: How do you set focus to a particular input box?

Posted: Wed Nov 18, 2009 10:01 am

+0-

Usually, YUI2 tried to provide extra functionality or functionality that was defective or inconsistent in the DOM. If the original method worked fine, let it be. BTW, you also have select()

jamesmoorecode

Joined: Wed Nov 18, 2009 9:12 am
Posts: 11

Tags:

Re: How do you set focus to a particular input box?

Posted: Wed Nov 18, 2009 4:13 pm

+0-

I tried putting focus() in to the onclick handler that displays the dialog box, but it doesn't focus on the element.

From Firebug, I did confirm that I can enter the same focus() command by hand, once the dialog is on the screen, and it does put the focus where I want it. But it looks like part of showing the dialog causes focus to go away.

Does this need to go in some kind of handler that runs after the dialog is displayed?

Matt Parker

YUI Contributor

Username: mattatlamplight
Joined: Mon Apr 20, 2009 12:03 pm
Posts: 466
Location: London UK
GitHub: mattparker
Gists: mattparker

Re: How do you set focus to a particular input box?

Posted: Thu Nov 19, 2009 12:44 am

+0-

Yes, I'd guess that the form element doesn't exist when the focus() is called in onclick. It depends how you're putting the form together (is it coming from the server; are you re-using the dialog).

If it's coming from the server, you could put the focus() at the end of your callback. If it's a new dialog, you could subscribe to the renderEvent perhaps. If you're re-using an existing dialog and changing the content, you could try the changeContentEvent (though you'd need to check it fires after the content's in there.

jamesmoorecode

Joined: Wed Nov 18, 2009 9:12 am
Posts: 11

Tags:

dialog

Re: How do you set focus to a particular input box?

Posted: Thu Nov 19, 2009 9:56 am

+0-

It's none of those - it's an existing dialog, with unchanged contents. This didn't work:

var selectFirstInput = function (e, i) {
console.debug("sdffasdf");
YAHOO.util.Dom.get("task_name").focus();
}

myDialog.showEvent.subscribe(selectFirstInput, myDialog);

I see the console debug output, so I know the code runs. But the input box isn't selected. If I cut and paste the YAHOO.util.Dom.get("task_name").focus(); line into Firebug, the right element is selected. I suspect the element is getting selected, then focus is getting yanked away after the show happens - so when should I change focus back to where the user wants it?

jamesmoorecode

Joined: Wed Nov 18, 2009 9:12 am
Posts: 11

Re: How do you set focus to a particular input box?

Posted: Thu Nov 19, 2009 10:12 am

+1-

The hack I'm using right now is to wrap the focus() call in a setTimeout, so it executes after the dialog is shown. Works, but feels really ugly.

portalparts

Joined: Sun Nov 29, 2009 7:51 am
Posts: 1

Re: How do you set focus to a particular input box?

Posted: Sun Nov 29, 2009 7:52 am

+0-

Thanks for the tip/workaround on using the setTimeout.

mack jen

Username: jen0123
Joined: Wed Aug 25, 2010 10:26 pm
Posts: 1
GitHub: sagar0123
Gists: sagar0123

How do you set focus to a particular input box?

Posted: Wed Aug 25, 2010 10:34 pm

+-1-

Now a day To complete a form by providing required information carefully filled out the
job application. To become or make more fleshy. It’s Advice on answering application
form questions .You've stumbled across a fantastic job opportunity but there's a form
to fill in before the company will even consider.

________________________________________________________________________________________

Earn an Extra $1000 to $1200 per month doing Part Time Data Entry Jobs! Work from home
data entry jobs to post simple data submissions on Internet. Make $1 per entry. Easy
form filling, data entry and ad posting jobs. No selling, No phone calls, No Marketing.
No Investment. Bi-weekly payments. Full Training
Provided. Pls visit: Data-Entry

Page 1 of 2

[ 12 posts ]

Go to page 1, 2 Next

New Topic | Post Reply | Print view

Previous topic | Next topic

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