Set focus on first field in field editor

  • 3
  • Question
  • Updated 1 year ago
  • Answered
I have a "New Account" page with a field editor in it. When the page loads, I want the first field to get the focus, so that the user can immediately start typing the name of the new account.

Do I need some Javascript to magic this?
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,748 Points 5k badge 2x thumb

Posted 6 years ago

  • 3
Photo of Zach McElrath

Zach McElrath, Employee

  • 52,256 Points 50k badge 2x thumb
Official Response
Glenn, this is a great idea. We've been experimenting with what the best logic is to implement this, as everyone's pages can be so different that it's hard to determine what the "first field" is on a given page.

However, for scenarios like your "New Account" example, it's quite easy to identify the "first field", and likewise quite easy, with a simple Inline JavaScript resource, to assign focus. Here's what you do:

(1) Create a new Inline JavaScript resource in your page, with the following body:



(function(skuid){
var $ = skuid.$;
$(function(){
$('.nx-field > input').first().focus();
});
})(skuid);




That's it! You should get a cursor in the first field.

Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,748 Points 5k badge 2x thumb
Perfect. That works a treat. Thanks.

But just to add a challenge ...

... my page in question is actually not just a simple "new account" page. It's a three step wizard that creates a new account with associated contacts and tasks (based on your code samples). It works fine and now the first field on the first step gets the focus. But ideally when the user navigates to step 2, the first field there would then be focused. Possible?

Thanks. :)
Photo of ktyler

ktyler

  • 9,274 Points 5k badge 2x thumb
Would it be possible to add a custom object that allowed you to add metadata for skuid forms (by including a model for it, filtered on the form name). that would make the information about which field was the "first field" for any form available to the javascript on the form. It would allow arbitrary metadata that could be used to play around with the form after it loaded.
Photo of John Nelson

John Nelson, Product Manager

  • 3,356 Points 3k badge 2x thumb
Glenn, you can use the wizard's stepchange event to trigger the code in Zach's example. Check it out:

(function(skuid){

var $ = skuid.$;
$(function(){
$('.nx-field > input').first().focus();

$('.nx-wizard').on('stepchange',function(event,params){
params.currentStep.editor.element.find('.nx-field > input').first().focus();
});
});
})(skuid);
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,748 Points 5k badge 2x thumb
Hi John ... I tried this, by replacing Zach's snippet with yours. I still get the focus set correctly on the first wizard page (as before), but not on step 2.
Photo of John Nelson

John Nelson, Product Manager

  • 3,356 Points 3k badge 2x thumb
Yeah, looks like I steered you a bit wrong there. Technically, I don't think it should have worked at all on the first step (because I had it set to trigger only on a step change event). Now it should work on both. I think the selector was still grabbing the input element from the first step even though it's not showing. I tried adding the ":visible" pseudo-selector, but it did the same thing.

I ended up using the "currentStep" value in the params object that's passed through the stepchange callback. From there I was able to get at the "element" property that contains all the html elements for the step. Long story short, the code above is updated so that it should work for you (does for me).
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,748 Points 5k badge 2x thumb
Thanks John. That does the job perfectly!
Photo of John Nelson

John Nelson, Product Manager

  • 3,356 Points 3k badge 2x thumb
Glad to hear it!
Photo of Nate Gilbertson

Nate Gilbertson

  • 1,194 Points 1k badge 2x thumb
Is is possible to set the focus to the end of the text if there is already text in a field rather than the front of the field? I have a notes field that users want to add notes to, but the cursor is set to the beginning of the field rather than the end.
Photo of Tim Shores

Tim Shores

  • 682 Points 500 badge 2x thumb
Bumping this. I'm a new Skuid user and digging into tried and true methods. I'm so happy that I found this thread. I was able to implement the first js snippet, provided by Zach above, on a Search component by giving it the nx-field class.

Before I experiment more with this snippet, I wonder, since this thread is 5 years old, are there new/better techniques for controlling focus? Could anyone point me to other resources on this topic?