隐藏来自Jquery UI模式dailog的闪烁光标

时间:2015-06-20 08:26:33

标签: javascript jquery asp.net-mvc-4 jquery-ui

这是我的观点。

<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")

这是我的剧本。

$(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');
        }
    });
}

当出现错误消息dailog box时,登录失败时出现问题,它显示闪烁的光标,光标在用户名textarea中的dailog框后面闪烁。为什么会发生这种情况以及如何解决? 以下是两个屏幕截图。

enter image description here

现在看这是实际闪烁的光标。

enter image description here

2 个答案:

答案 0 :(得分:0)

这是由于IE而不是JQuery。实际上我在IE8中遇到了同样的问题。当我在页面上显示加载图像时,光标在我的搜索框中保持消隐 在我测试的Firefox和Chrome中,一切正常。

答案 1 :(得分:0)

我需要使用以下代码段。

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

而不是

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