Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   события focus и blur (https://javascript.ru/forum/jquery/21788-sobytiya-focus-i-blur.html)

AdeL1ne 24.09.2011 09:13

события focus и blur
 
Здравствуйте! Помогите разобраться со скриптом..
Для начала сам код:
<span class="error_message"></span><br id="before_pass" />
<input id="pass" type="text" size="30" maxlength="30" name="pass" value="Пароль" />

Задача следующая: При фокусе на input'e $('#pass') поменять его тип на password и убрать значение value='Пароль'.
А при отмене фокусу (blur), если пароль не был введен, вернуть обратно type='text' и value='Пароль', иначе оставить все как есть.

Т.к. методом attr просто взять и поменять type с text на password оказалось не возможным, вариантов решения этой задачи осталось два:
либо создавать два input'a, либо работать с одним, удаляя его и добавляя уже с нужным типом. Первый вариант у меня получился, но хотелось бы реализовать алгоритм с одним input'ом.
Вот код, который я написал, он ессно работает не правильно:

$('#pass').val('Пароль');
var pass_true = '<input id="pass" type="password" size="30" maxlength="30" name="pass" value="" />';
var pass_fake = '<input id="pass" type="text" size="30" maxlength="30" name="pass" value="Пароль" />';

$('#before_pass + input').focus(function() 
{
    type = $(this).attr('type');
    if ($(this).val() == 'Пароль' && type == 'text')
    {
        $(this).remove();
        $('#before_pass').after(pass_true);
        /*$('#before_pass + input').focus();*/
    }
    else
    {
        return false;
    }
       	    
});

$('#before_pass + input').blur(function()
{ 
    type = $(this).attr('type');
    if ($(this).val() == '' && type == 'password')
    {
        $(this).remove();
        $('#before_pass').after(pass_fake);
    }
    else
    {
        return false;
    }  
});

Ну вот собсно придумать как это должно работать с одним инпутом у меня пока не получилось...

walik 24.09.2011 09:26

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<input type="text" id="password" value="Пароль" />
<script>
$('#password').focus(function() {
  if ($(this).attr('type') == 'text') {
    $(this).val('');
    this.setAttribute('type', 'password');
  }
});

$('#password').blur(function() {
  if ($(this).attr('type') == 'password' && $(this).val() == '') {
    $(this).val('Пароль');
    this.setAttribute('type', 'text');
  }
});
</script>


Интересно то что, через JQuery атрибут type не менялся, а вот обычным способом setAttribute, все сработало


Часовой пояс GMT +3, время: 16:38.