Установить значение по умолчанию для ввода пароля/сценария/проблемы в IE 8

Пожалуйста, посмотрите нижеприведенную ветку:
Установить значение пароля по умолчанию
я следовал ответу №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 все в порядке / как это можно исправить?

проблема
в том, что текстовое поле никогда не фокусируется снова после клика ....
у нас здесь есть добыча?


person SilverLight    schedule 29.10.2011    source источник


Ответы (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);
    }
}

Посмотрите на скрипт js по адресу http://jsfiddle.net/V2Dh5/17/.

person Bobby    schedule 29.10.2011
comment
спасибо дорогой братан за ответ / но у твоего примера есть проблема в IE 8 -> вообще не работает! в fire fox все в порядке / я ненавижу IE 8. есть идеи? - person SilverLight; 30.10.2011
comment
Извините за предыдущий ответ @MoonLight, вы правы, он не работает в IE 8. Но я вижу проблему, теперь глупый IE 8 не позволяет вам изменять атрибут типа элемента при загрузке документа. Таким образом, единственный способ заставить его работать в IE 8 — заменить весь элемент ввода (см. отредактированный ответ). Пожалуйста, помните, что код показывает вам только концепцию. Я бы не рекомендовал жестко кодировать полную строку элемента, вместо этого используйте приложения jquery element. - person Bobby; 30.10.2011
comment
очень признателен за внимание и редактирование -› если бы я мог, я дам вам 2 голоса за ваш ответ / setTimeout был хорошей идеей! - person SilverLight; 31.10.2011