I am trying to set the focus on my visualforce page input field. I've tried using:

jQuery(document).ready( function() { 
var myElement = document.getElementById("{!$Component.caretask.form.op.pb.pbs1.subject}");

I've also tried as suggested here set Focus on Visualforce Page :

var myElement = document.getElementById("{!$Component.caretask.form.op.pb.pbs1.subject}");
window.addEventListener("load", function() {
setTimeout(function() {
}, 100);  // 0.1 seconds after load time.

However neither seem to be working. I'm probably missing something simple? Below is my page:

<apex:page standardController="Task" extensions="SaveAndReturnTaskExtension" tabStyle="Account" id="caretask">
<apex:form id="form" >
    <apex:outputPanel id="op">
        <apex:pageBlock id = "pb" >
            <apex:pagemessages />
            <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!saveAndReturn}"/>
                <apex:commandButton value="Cancel" action="{!cancel}"/>                
            <apex:pageBlockSection id="pbs1" columns="2" title="Task Information">
                <apex:inputField id="owner" value="{!Task.OwnerId}" /> 
                <apex:inputField value="{!Task.WhatId}" /> 
                <apex:inputField id="subject" value="{!Task.Subject}" />
                <apex:inputField value="{!Task.WhoId}"/>                         
                <apex:repeat value="{!$ObjectType.Task.FieldSets.CARETaskInformation}"  var="f">
                <apex:inputField value="{!Task[f]}" required="{!OR(f.required, f.dbrequired)}"/>
                <apex:outputText />
                <apex:inputField value="{!Task.CallDisposition__c}"> 
                <apex:actionSupport event="onchange" rerender="t1" />
                <apex:inputField value="{!Task.Description}" style="width: 600px; height: 200px" /> 
                <apex:inputField value="{!Task.LiveCallVMEmailColdReason__c}" rendered="{!IF( Task.CallDisposition__c == 'Live Call/VM/Email (Cold)', true, false )}" >
            <apex:pageBlockSection title="Appointment">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.Appointment}"  var="apt">
                <apex:inputField value="{!Task[apt]}" required="{!OR(apt.required, apt.dbrequired)}"/>
            <apex:pageBlockSection title="Additional Information">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.AdditionalInformation}"  var="add">
                <apex:inputField value="{!Task[add]}" required="{!OR(add.required, add.dbrequired)}"/>
            <apex:pageBlockSection title="From Template">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.FromTemplate}"  var="tem">
                <apex:inputField value="{!Task[tem]}" required="{!OR(tem.required, tem.dbrequired)}"/>
            <apex:pageBlockSection title="Other Information">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.OtherInformation}"  var="oi">
                <apex:inputField value="{!Task[oi]}" required="{!OR(oi.required, oi.dbrequired)}"/>
            <apex:pageBlockSection title="System Information">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.SystemInformation}"  var="si">
                <apex:outputField value="{!Task[si]}" />
            <apex:pageBlockSection title="Dial Source Info">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.DialSourceInfo}"  var="dsi">
                <apex:inputField value="{!Task[dsi]}" required="{!OR(dsi.required, dsi.dbrequired)}"/>
            <apex:pageBlockSection title="Recurrence">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.Recurrence}"  var="rec">
                <apex:inputField value="{!Task[rec]}" required="{!OR(rec.required, rec.dbrequired)}"/>
            <apex:pageBlockSection title="Reminder">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.Reminder}"  var="rem">
                <apex:inputField value="{!Task[rem]}" required="{!OR(rem.required, rem.dbrequired)}"/>
 jQuery(document).ready( function() { 
 var myElement = document.getElementById("{!$Component.caretask.form.pb.subject}");
</script >

  • what part of your code is not working exactly? what does your browser console say? any debugging info? errors?
    – glls
    Sep 14, 2017 at 20:05
  • No errors, jut the field focus is staying on the first input field rather than highlighting the subject field. Sep 14, 2017 at 20:06
  • 1
    did you try removing the focus from the first field before setting focus() on the later?
    – glls
    Sep 14, 2017 at 20:08
  • 1
    When you inspect the rendered HTML in the browser (view source), what does this line from your markup look like? var myElement = document.getElementById("{!$Component.caretask.form.op.pb.pbs1.subject}"); does it render as var myElement = document.getElementById(""); ?
    – Mark Pond
    Sep 15, 2017 at 4:41

3 Answers 3


I created a simple fiddle HERE that should outline a very simple way to do this. you don't need anything really special just because it is a visual force component, just be sure that you have the id set and be sure that of course no others are similar


Just use and ends with selector


Much easier to select that way as long as you are careful no other ids end with subject


Have you tried just using "{!$Component.subject}"?

Also you could add an extra data- attribute on the element and query for that instead (it doesn't have to be "role", it can be anything):

<apex:inputField id="subject" value="{!Task.Subject}" html-data-role="subject" />

Then to find it with jQuery:

var myElement = jQuery('[data-role=subject]');

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .