function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
stunaitestunaite 

JavaScript focus() ... someonehelp please?

Hi,

 

I just want to focus on a inputtextbox than the first, when a page is opened. But it doesn't work.

 

 

<apex:page controller="focus">
	<apex:form id="f1">
	<apex:inputtext id="field1" />
	<apex:inputtext id="field2" />
	</apex:form>		
	<script>
		function focu(){
			document.getElementById('{!$Component.f1.field2}').focus();
		}
		
		focu();
	</script>
</apex:page>

 

 

Curiously, using a command button focus is correctly moved to 2nd inputtext box.

 

 

<apex:page controller="focus">
	<apex:form id="f1">
	<apex:inputtext id="field1" />
	<apex:inputtext id="field2" />
	<apex:commandbutton value="f2" onclick="focu();" rerender="nothing"/>
	</apex:form>		
	<script>
		function focu(){
			document.getElementById('{!$Component.f1.field2}').focus();
		}
	</script>
</apex:page>

 

 

Someone please help me.

 

Thanks in advance

Best Answer chosen by Admin (Salesforce Developers) 
Fan YangFan Yang

The VF header/sidebar JS uses window.onload; you have to have the VF scripts run first; then yours.

All Answers

Fan YangFan Yang

put showheader="false" standardStylesheets="false" sidebar="false"  in your apex:page tag, it will work.

stunaitestunaite

You are right... it works. :smileysurprised:

 

Unfortunately, the real world applccation when I am unabled to put focus on a certain field has header and side bar. So I need an explanation a an effective solution.

 

Meanwhile I have detected that focus  firstly goes to the field I want, but something happens later and move focus to first field.

 

Now I "fix" the problem assuring that my instruction is executed AFTER everything is loaded.

 

Replacing 

 

focus();

 

by

 

SetTimeout("focus()",1);

 

:smileytongue:

 

Fan YangFan Yang

use following JS:

 

<script type="text/javascript">
        function focu(){
            var e = document.getElementById('{!$Component.f1.field2}');
            e.focus();
        }
        
        var previousOnload = window.onload;
        window.onload = function (){
            if(previousOnLoad) previousOnload();
        }
        focu();
    </script>

salesforce header/sidebar UI has JS, they are executed after your JS. Adding previousOnload, to make sure your JS executed at end.

 

stunaitestunaite

I tryed just with:

 

windows.onload = focu;

 

and it resulted.

 

Can you explain your code, it seems really interesting

 

 

        var previousOnload = window.onload;
        window.onload = function (){
            if(previousOnLoad) previousOnload();
        }

 Thanks for all your help

 

 

Fan YangFan Yang

The VF header/sidebar JS uses window.onload; you have to have the VF scripts run first; then yours.

This was selected as the best answer
stunaitestunaite

I understand now.

 

Many Thanks!!!!