Hide blinking cursor from Jquery UI modal dailog

Question

This is my view.

<div class="login-card">
    <h1>Log-in</h1>
    <br>

    <input type="text" id="txtUser" placeholder="Username" autofocus value="adm">
    <input type="password" id="txtPass" placeholder="Password" value="adm">
    <input type="button" name="btnLogin" class="login login-submit" value="Login" onclick="btnLoginClick($('#txtUser').val(), $('#txtPass').val())">
</div>

@globalHelper.CreateDivForModalDialog("divLoginError", "Error", "Login Failed ! Try again")

This is my script.

$(document).ready(function () {
    $('#divLoginError').hide();
})

function btnLoginClick(username, password) {
    $.ajax({
        url: "/Home/ValidateLogin",
        data: { username: username, password: password },
        dataType: "json",
        success: function (data) {
            var dialogError = $("#divLoginError").dialog({
                modal: true,
                autoOpen: false,
                position: { my: "center", at: "center center", of: window },
                height: dialogSize.getHeight(25),
                width: dialogSize.getWidth(25),
                overflow: scroll
            });

            if (data.toString() == 'true') {
                window.location.href = "/Home/FWMenu";
            }
            else {
                dialogError.dialog("open");
                $('#txtUser').focus();
            }
        },
        error: function (e) {
            alert('error');
        }
    });
}

Problem is on login failed when the error message dailog box is coming, its showing with the blinking cursor,the cursor which is blinking behind the dailog box in the username textarea. Why it is happening and how to solve it? Below is the two screen shots.

enter image description here

Now look this is the cursor where it is blinking actually.

enter image description here

Instead of setting focus `$('#txtUser').focus();` immediately after dialog open. You can set the input text focus focus on `dialog close event`. JQuery Model Dialog close can be captured in JQuery event - http://stackoverflow.com/questions/171928/hook-into-dialog-close-event — ramiramilu, Jun 20 '15 at 08:53
For my above answer, here is the fiddle - http://jsfiddle.net/db5SX/5216/. Let me know if it helps. — ramiramilu, Jun 20 '15 at 08:59

score 0 · Answer 1 · answered Jun 20 '15 at 08:38

0

It is due to IE but not JQuery. In fact I have the same problem in IE8. The cursor kept blanking in my search box while I was displaying a loading image over the page.
Everything works fine in Firefox and Chrome I tested.

answered Jun 20 '15 at 08:38

Yes you are right a bit. I have found another way. Thanks for your kind reply. – Amit Jun 20 '15 at 09:13

score 0 · Answer 2 · answered Jun 20 '15 at 09:15

0

I need to use the below code snippet.

$(this).parent().find("txtUser.hidden").focus();

Instead of

$('#txtUser').focus();

answered Jun 20 '15 at 09:15

Amit

199
1
5
18

Hide blinking cursor from Jquery UI modal dailog

2 Answers2