Visualforce Page Input Field Focus jQuery

Question

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}");
 jQuery(myElement).focus();  

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() {
    document.querySelector(myElement).focus();
}, 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:pageBlockButtons>
            <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:repeat>
                <apex:outputText />
                <apex:inputField value="{!Task.CallDisposition__c}"> 
                <apex:actionSupport event="onchange" rerender="t1" />
                </apex:inputField>
                <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:inputField>
            </apex:pageBlockSection>
            <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:repeat>
            </apex:pageBlockSection>
            <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:repeat>
            </apex:pageBlockSection>
            <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:repeat>
            </apex:pageBlockSection>
            <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:repeat>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="System Information">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.SystemInformation}"  var="si">
                <apex:outputField value="{!Task[si]}" />
                </apex:repeat>
            </apex:pageBlockSection>
            <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:repeat>
            </apex:pageBlockSection>
            <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:repeat>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Reminder">
                <apex:repeat value="{!$ObjectType.Task.FieldSets.Reminder}"  var="rem">
                <apex:inputField value="{!Task[rem]}" required="{!OR(rem.required, rem.dbrequired)}"/>
                </apex:repeat>
            </apex:pageBlockSection>
        </apex:pageBlock> 
    </apex:outputPanel>
</apex:form>  
<script>
 jQuery(document).ready( function() { 
 var myElement = document.getElementById("{!$Component.caretask.form.pb.subject}");
 jQuery(myElement).focus(); 
</script >

Answer 1

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

Answer 2

Just use and ends with selector

jQuery("[id$=subject]").focus();

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

Answer 3

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]');