jQuery focus class not being rendered on control

Question

I am trying to set the focus on the first control in a form when I first enter the page. This sometimes works, and sometimes doesn't - the cursor is not set in the field but the address in the address bar has the focus. The example below doesn't work.

$(document).ready(function () {

$(".focus").first().focus();

 var pickerOpts1 = {
                defaultDate: "+0",          //Used to move the current date cursor by n-days
                dateFormat: "mm/dd/yy",
                showOtherMonths: true,
                changeMonth: true,
                changeYear: true,
                yearRange: '1970:2020'
            };


        $("#Sin").mask("999-999-999");
        $("#successorHolderSin").mask("999-999-999");

        $(".sinNumber").mask("999-999-9999");

        $(".datepicker").mask("99/99/9999");
        $(".datepicker").datepicker(pickerOpts1);



     var dateFormat = "dd/mm/yy"; // en-gb date format
            jQuery.validator.addMethod('date', function (value, element, params) {
                if (this.optional(element)) {
                    return true;
                };

                var result = false;
                try {
                    $.datepicker.parseDate(dateFormat, value);
                    result = true;
                }
                catch (err) {
                    result = false;
                }
                return result;
            }, '');

});

<%:Html.DropDownListFor(r => Model.LegislationId, legislationTypeItems, new { @class = "focus" })%>

However, when I go to look at the source code after I've run the page or use the Developer Tools to look for it the class shows up in the tag:

<select class="focus" data-val="true" data-val-number="The field LegislationId must be a number." id="LegislationId" name="LegislationId">

Can you tell me what I might be missing? The jQuery files I'm using are:

  <script src="../../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.maskedinput-1.3.js" type="text/javascript"></script>    
    <script src="../../Scripts/jquery-datepicker.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.js" type = "text/javascript"></script>

Andras Toth · Accepted Answer · 2013-03-02T17:09:21.423

1

$(".focus") returns an array of elements even if only one element is matched to the selector. So try this:

$(".focus").first().focus();

Edit: To make it run on page load you need to wrap it like this:

$(function() {
    $(".focus").first().focus();
});

edited Mar 02 '13 at 17:09

answered Feb 25 '13 at 14:03

Andras Toth

576
4
11

Unfortunately that didn't work, but for some reason the focus is set on the address bar rather than the control? – silvenwolf Mar 01 '13 at 15:03
I edited the answer, let me know if that solves your problem. – Andras Toth Mar 03 '13 at 16:18
I thought it did but only if I refresh the page - when I first navigate to it with a redirectToAction (mvc) it opens up the datetimepicker and shows the mask but the highlight is still on the address bar. I've edited the original question to show where it is in my code. – silvenwolf Mar 05 '13 at 21:17
additionally I am using IE9 if that helps. – silvenwolf Mar 05 '13 at 21:42
Hm, strange. But some code is missing from above, because I only see a dropdown, no datepicker. Can you include the rest of the code? Also, have you tried it in another browser? – Andras Toth Mar 06 '13 at 08:06
I added the datepicker and the validation stuff as well. I tried it in Firefox and it seems to work fine but the company standard at this moment is IE9. Thanks for all the time you have spent helping me so far, Andras. – silvenwolf Mar 06 '13 at 17:05
To be honest I'm stucked. So I googled IE focus problem, and I found this: [jQuery focus problem](http://stackoverflow.com/questions/1326993/jquery-focus-sometimes-not-working-in-ie8) So it basically says that use plain javascript to set focus. Give it a try, maybe it helps. – Andras Toth Mar 07 '13 at 06:51
It sometimes work, sometimes doesn't still... but thank you!! – silvenwolf Mar 14 '13 at 13:02

jQuery focus class not being rendered on control

1 Answers1