在IE 8中设置密码输入/场景/问题的默认值

时间:2011-10-29 12:25:54

标签: asp.net types passwords

请参阅以下主题:
Set Default Value Of A Password
为了我的目的,我按照这样的方式回答#1:

                <div id="headertxtPassWord-Container" class="header-login-input-Container">
                    <asp:TextBox ID="headertxtPassWord" runat="server" Text="password"
                    onclick="return onclickOfPassWord(this);" onblur="onblurOfPassWord(this);" 
                        CssClass="header-login-input"></asp:TextBox>
                </div>

function onclickOfPassWord(This) {
    if (This.value == 'password') {
        $('#headertxtPassWord-Container').html("<input id='headertxtPassWord' name='headertxtPassWord' type='password' value='' onclick='return onclickOfPassWord(this);' onblur='onblurOfPassWord(this);' class='header-login-input' />");
        $('#headertxtPassWord').focus();
    }
}

function onblurOfPassWord(This) {
    if (This.value == '') {
        $('#headertxtPassWord-Container').html("<input id='headertxtPassWord' name='headertxtPassWord' value='password' onclick='return onclickOfPassWord(this);' onblur='onblurOfPassWord(this);' class='header-login-input' />");
    }
}

但是我的代码在IE 8和firefox中有问题,每件事都可以/如何解决这个问题?

问题
单击后,该文本框永远不会再聚焦.... 我们这里有战利品吗?

1 个答案:

答案 0 :(得分:1)

尝试此代码,看看它是否有帮助。我试图模仿你的例子,所以它更有意义。

<强> HTML

<div id="headertxtPassWord-Container" class="header-login-input-Container">
    <input id="headertxtPassWord" value="password" class="header-login-input"  />
</div>

<强> JQuery的

$('.header-login-input').bind('click', function() {
    if ($(this).val() === "password")
    {
       this.type = "password";
       $(this).val('');
    }
});

$('.header-login-input').bind('blur', function() {
    if ($(this).val() === "")
    {
       this.type = "text";
       $(this).val('password');
    }
});

也是一个js小提琴手,可以看到一个有效的例子http://jsfiddle.net/V2Dh5/3/

<强>被修改

这是IE 8的修复

$('.header-login-input').live('click', PopulateElement);

$('.header-login-input').live('blur', function() {
    if ($(this).val() === "")
    {
       $(".header-login-input-Container").html('');
       $(".header-login-input-Container").html("<input id=\"headertxtPassWord\" name=\"headertxtPassWord\" class=\"header-login-input\" value=\"password\" type=\"text\"/>");  
    }
});


function PopulateElement () {
if ($(this).val() === "password")
    {
       $(".header-login-input-Container").html('');
       $(".header-login-input-Container").html("<input id=\"headertxtPassWord\" name=\"headertxtPassWord\" class=\"header-login-input\" type=\"password\"/>");
        setTimeout(function() { $("#headertxtPassWord").focus()}, 10);
    }
}

查看http://jsfiddle.net/V2Dh5/17/

处的js fiddler