+ Start a Discussion
boihueboihue 

Set focus to a specified field

Hi,
Does any expert know how to set the focus to a specified field in the Visualforce Page?
Best regards!
Sam.arjSam.arj

Add this javascript code to the bottom your page (before the page closing tag):

Code:
<script type="text/javascript">
  document.getElementById('{!$Component.yourComponentId}').focus();
</script>

 

Cheers
boihueboihue

Thanks Sam for your quick response!

What I need is in the Visualforce Page, I have created a command button doing the validation of all input data before saving them into the Salesforce objet. This validation code located at the Apex class module, during the validation, if there's any invalid data typed by the user, I have to display the corresponding Error message then set the focus to the corresponding field in the Visualforce Page. For example, for the invalid input Zip code then the focus should set to the Zip code field, for an invalid Phone number then the focus should set to the Phone number field... So I think the set focus instruction should be written in the Apex Class and not in the Visualforce Page.

Best regards!

Sam.arjSam.arj
Considering that the message part you can take care of yourself.
This might not be the best solution but it will work:

Code:
<script type="text/javascript">
  function zipCodeFocus() {
  document.getElementById('{!$Component.yourComponentId}').focus();
  }
  
  {!ControlToFocus}
</script>

-------------------------
public class controller{
  private string controlToFocus;

public string getControlToFocus() {
return controlToFocus;
}

public PageReference myMethod()
{
if (!IsZipCodeValid)
controlToFocus = 'zipCodeFocus();';
return null;
}
}

 


boihueboihue
Thanks Sam!
 
I'll try to integrate your technical solution to see if they will work for me.
 
Best regards!
sandeep@Salesforcesandeep@Salesforce

<!-- To set focus on Top->
<input id="hiddenElementId" type="hidden" />
<script type="text/javascript">
window.onload = setFocus
function setFocus() {
              document.getElementById("hiddenElementId").focus();
}
</script>

Anna ProvizAnna Proviz

Thanks, its work

Robbie ColemanRobbie Coleman
I tried many different ideas from stackexchange and here but Sandeep's answer is the only one that worked for me! Thanks! :)
narsavagepnarsavagep
Please note that sandeep's solution above could override the standard "onload" functions that SFDC puts onto the page... thus preventing standard SFDC functionality from working (like date pop-ups and other things that they use javascript for).

A safer way to do this is to append your "setFocus" function to the existing window onload functions (if any).
<script type="text/javascript">
    function addLoadEvent(func) { 
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function() {
                oldonload();
                func();
            }
        }
    }
    
    function setFocus() {
        document.getElementById('{!$Component.___}').focus();
    }
    addLoadEvent(setFocus);
</script>

Where "$Component.___" is the necessary id reference to the field to which you want to set focus.
Merri FurlongMerri Furlong
Thank you narsavagep - for the tip on appending window onload functions!
Neeti Kumar 11Neeti Kumar 11
Need some help here too. I have this UI which has multiple input boxes on the page and I want foucs on the 1st field. Something like this:
<div class="slds-form-element__control">
<apex:inputText id="firstNameValue" required="true" value="{!firstName}" styleClass="slds-input text-input"/>
</div>
 Could someone help me on how do I focus this one? I tried what is recommended above but I am probably missing something. Cant get it done? Thanks a lot