How to Remove / Focus from First Input Field in Visualforce Page
Alexis Lam
10:47 am
Problem: When a Visualforce Page loads, the first input field is always selected. This can be confusing to the users as the input field is required to be populated only in certain cases. Is there any way to remove the focus/ allow me to have some other fields in focus?
Solution:
Option1 - Create hidden element inside form and then focus to the hidden element
1.1 Create hidden element inside form
<input id="hiddenElement" type="hidden" />
1.2 Add following JS code to add an window.onload event to set the focus to the hidden element
<script type="text/javascript">
window.onload = setFocus
function setFocus() {
document.getElementById(“hiddenElement”).focus();
}
</script>
window.onload = setFocus
function setFocus() {
document.getElementById(“hiddenElement”).focus();
}
</script>
Option2 - Override the originally defined function that salesforce.com uses to focus on an element
2.1 Create a JavaScript function with the same name as the setFocusOnLoad function
<script type="text/javascript">
function setFocusOnLoad() {
//do nothing
}
</script>
function setFocusOnLoad() {
//do nothing
}
</script>
Option3 - Remove the Autofocus for all the fields and will put the focus on any field that you want
3.1 Create a JavaScript function to remove all autofocus
<script>
window.onload = function() {
jQuery('input[type=text]').blur();
/*
//For putting the Focus on particular field
jQuery('[id$=pList]').focus();
*/
};
</script>
Ref: http://interactiveties.com/blog/2014/prevent-calendar-display-page-loaded.php.
window.onload = function() {
jQuery('input[type=text]').blur();
/*
//For putting the Focus on particular field
jQuery('[id$=pList]').focus();
*/
};
</script>
