1

I have following test html files, which I stripped unnecessary tags from them

dialogTest.htm

<!DOCTYPE>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../theme/blitzer.css" />
    <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#dlg").dialog({
                autoOpen: false,
                resizable: false,
                modal: true
            });

            $('#button1').click(function () {
                ChangePassword();
            });

        });

        var loadedByFunction = false;

        function ChangePassword() {
            loadedByFunction = true;
            $("#dlg").dialog('option', {
                width: 380,
                height: 300,
                title: 'Change Password',
                close: function (event, ui) {}
            });
            $('#dlg').children().attr('src', 'dialogContent.htm')
            .load(function () {
                if (loadedByFunction) {
                    loadedByFunction = false;
                    $("#dlg").dialog('open');
                }
            });
            return false;
        }
    </script>
</head>
<body>
    <div style="display: none">
        <div id="dlg">
            <iframe src="" ></iframe>
        </div>
    </div>
    <button type="button" name="button1" id="button1" >Change Password</button>
</body>
</html>

And dialogContent.htm

<!DOCTYPE>
<html>
<head>
    <script type="text/javascript">
        $(function () {
            $("input[name='password']").focus();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="1" cellspacing="0" border="0">
            <tr>
                <td>Password</td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td>New Password</td>
                <td><input type="password" name="password1" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input type="password" name="password2" /></td>
            </tr>
        </table>
    </div>
    <br />
    <div align="right">
        <input type="submit" name="btnOK" value="Ok" />
        <input type="reset" name="btnCancel" value="Cancel" onclick="Close()" />
    </div>
    </form>
</body>
</html>

I am trying to focus on first input in the dialog, which is not happening. the actual focused element is the close button (you can verify this by pressing enter, which closes the dialog)

Please note, content of the dialog is inside and iframe. I cannot combine the content of dialog by inserting html directly to div tag. both pages are active aspx pages and cannot be simply combined. Actual dialog contents are more complex than a few input boxes and can be combination of datebox, dropdown, textarea, multiselect, ...

Please note, setTimeout didn't work either because dialog waits for the page to return control to parent before opening it

Question How can I focus move focus to first component in dialog box (in this case password input)

AaA
  • 3,600
  • 8
  • 61
  • 86
  • Try `$("#dlg").contents().find('input:first()').focus()` – Arun P Johny Oct 23 '13 at 10:01
  • 1
    The correct fix will is to set the `autofocus ` attribute for the first input element in the html like `input type=".." ... autofocus />` – Arun P Johny Oct 23 '13 at 10:02
  • You can also check another topic on this subject: http://stackoverflow.com/questions/277544/how-to-set-the-focus-to-the-first-input-element-in-an-html-form-independent-from – Mihai Frentiu Oct 23 '13 at 10:15
  • Thank you for all your comments, it would be great if you tested the case before posting. `jQueryUI` moves the focus to close button after opening. I need to move it back to the control. @MihaiFrentiu, I checked that question before, it does not use iframe so does not apply to this case – AaA Oct 24 '13 at 02:07

4 Answers4

2

I had this same problem in the past too, jQuery moves focus to the first control in dialog, which in your case becomes close button on top of dialog. As jQueryUI does not have access to content of IFRAME it cannot find your password control automatically. on the other hand I am guessing you don't have access to content of dialog from parent either (cross domain may be?).

I think your question should be, how NOT to focus on first element of the dialog box

I found a temporary fix for this matter, however it is not perfect.

You can read about this in a ticket submited to jQueryUI bug 4731 about 4 years ago.

A comment suggests using following code in main file (dialogTest.htm)

<script type="text/javascript">
    $(function(){
        $.ui.dialog.prototype._focusTabbable = function(){}; 
    }
</script>

This code will disarm the focus movement of the jQueryUI dialog and you can use your focus script as before, but you will need a delay too. 

<script type="text/javascript">
    $(function () {
        setTimeout(moveFocus, 500);
    });

    function moveFocus(){
        $("input[name='password']").focus();
    }
</script>

However as I mentioned before, this code is not perfect. Delay should be adjusted for each page and again, it will not work all the times.

Community
  • 1
  • 1
Bistro
  • 1,915
  • 2
  • 14
  • 12
1

html5 has a solution for this: use the autofocus tag in the textbox you want to get focused. http://diveintohtml5.info/forms.html has more info on this. if you are unsure that your target browser supports autofocus, you can use the fallback on that same page.

Nzall
  • 3,439
  • 5
  • 29
  • 59
  • Thank you for you answer and comments, did you try it on the case that I provided? did it work? – AaA Oct 24 '13 at 02:08
0

You need to add autofocus attribute to the textbox.

<input type="password" name="password" autofocus="autofocus"/>
varunvlalan
  • 940
  • 10
  • 23
-1

using jQuery, you can do it as follows:

<script type="text/javascript">
window.onload = function() {
    $("input[name='password']").focus();
};
</script>

or

<script type="text/javascript">
$(document).ready(function() {
    $("input[name='password']").focus();
});
</script>
Ahsan Shah
  • 3,931
  • 1
  • 34
  • 48
  • `onload` is wrong, `onready` is correct. I'll give you a +1 if you can tell me why :) – Halcyon Oct 23 '13 at 10:12
  • the load event (a.k.a "onload") on the window and/or body element will fire once all the content of the page has been loaded. In contrast, jquery's $(document).ready(...) function will use a browser-specific mechanism to ensure that handler is called as soon as possible after the HTML/XML dom is loaded and accessible. – Ahsan Shah Oct 23 '13 at 10:16
  • You want the focus to happen as soon as possible. `onload` can fire much later than `onready`, making the focus occur much too late. Actually, even `onready` can fire too late if you're on a very slow connection, or the page is just very big. Perhaps the best solution is to immediately focus the input after it's been rendered. `autofocus` does exactly that - but is not well supported yet. – Halcyon Oct 23 '13 at 10:20
  • where is my bounty ?? :) – Ahsan Shah Oct 23 '13 at 10:38
  • Your analysis is correct, but your conclusion is wrong, sorry. – Halcyon Oct 23 '13 at 12:43
  • Thank you for you answer and comments, did you try it on the case that I provided? did it work? – AaA Oct 24 '13 at 02:10
  • @FritsvanCampen, Actually my problem is not the `onload` or `ready`. If you noticed I load content of `iframe` then showing the dialog, so both ready and onload are running even before the frame content is visible. after showing the dialog, `jQueryUI` moves the focus to close button, because it does not have access to any of the controls in `iframe`. I am looking for a way to override it. – AaA Oct 24 '13 at 02:14