8

I have a Visualforce page that sets the focus to the first apex:inputField when the page is loaded.

Being a DateTime this expands out the calendar date picker control and obscures a number of other controls.

DateTime as first inputField

How can I prevent the focus going on this control when the page if first loaded?

Note, the Start Date apex:inputField isn't actually the first control on the page. The Media Type aspx:SelectList actually preceeds it, but for some reason doesn't get focus.

9

The focus appears to be set by a javascript method in bodyOnLoad()

setFocusOnLoad

By providing my own definition of this function I can prevent the focus being set to the DateTime inputField.

E.g. Add the following to your Visualforce page.

<script>function setFocusOnLoad(){ /*NOOP*/ }</script>

While this works I'm open to a better solution. Salesforce could easily break this in the future by changing the function name etc...

| improve this answer | |
  • 1
    An easier fix is to place the date field elsewhere on the page so it is not the first element. The first element should be a text field (e.g. a number input, text input, phone input, etc). A good candidate is the name field, if not set to auto-number, or some other text field otherwise. This also applies to standard page layouts, not just Visualforce, and should be forward compatible. – sfdcfox Dec 2 '13 at 21:47
  • Mark this as the Accepted Solution -- it's simple simple awesome – Scott Pelak Dec 31 '13 at 16:27
  • 2
    You should be careful with this solution as it doesn't always work. The reason is because the sfdcPage.executeOnloadQueue statement could call the setFocus method, which will set focus to the first field in the form, and if that is a date field, then you will see the datepicker control despite having redefined the setFocusOnLoad method. I have used: function setFocus() { } with better success – Sean Russell Nov 10 '14 at 17:01
  • @SeanRussell Yes, this is going to be the downside to this style of solution. It might break as Salesforce make changes or how the page is composed. Thanks for the suggestion to use setFocus(). – Daniel Ballinger Nov 10 '14 at 20:46
  • function setFocus() { } worked for me! Thanks all! – Force Hero Feb 11 '15 at 11:41
4

It doesn't seem to be a documented feature, but the setFocus function called by Visualforce upon page load will skip fields where the data-skipFocus attribute is "true".

So possible solutions include setting this attribute on apex:inputField:

<apex:inputField value="{!record.Start_Date__c}" html-data-skipFocus="true" />

or on all of the fields before the onload event fires, e.g.

var form = document.getElementById('{!$Component.myForm}');
[].forEach.call(form.elements, function(el) {
  if (el.type === 'text' || el.type === 'textarea') {
    el.setAttribute('data-skipFocus', 'true');
  }
});
| improve this answer | |
  • Worked perfectly! – Anisa Aug 13 at 8:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.