Предисловие

Совсем недавно решил написать генератор пароля с возможностью просмотра генерированного пароля под звездочками. Для работы выбрал JQuery 1.8.3 и нативный JavaScript. При написании самого скрипта столкнулся с проблемой в JQuery 1.8.3 с функцией attr().

Вот сама проблема

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
...
<script type="text/javascript">
$('.showPassword').click(function(){
    var inputPsw = $('#password');
    if (inputPsw.attr('type') == 'password'){
            inputPsw.attr('type', 'text');
    } else {
            inputPsw.attr('type', 'password');
        }
});
</script>
...
<input type="password" name="password" id="password" />
<a href="#" class="showPassword">Показать /a>

Вид в консоли:… type property can't be changed

Проблема в том, что в JQuery 1.8.3 есть небольшой БАГ, функция attr() не работает по замене свойства атрибута, т.к. защита браузеров блокируют ее. В версии JQuery 1.9.0 она исправлена.

Решение

Нашел такое вот решение на нативном JavaScript с помощью функции .setAttribute(name, value) — устанавливаемый атрибут.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
...
<script type="text/javascript">
    $('.showPassword').click(function(){
        var inputPsw = $('#password');
        if (inputPsw.attr('type') == 'password') {
            document.getElementById('password').setAttribute('type', 'text');
        } else {
            document.getElementById('password').setAttribute('type', 'password');
        }
    });
</script>
...
<input type="password" name="password" id="password" />
<a href="#" class="showPassword">Показать /a>

Сам скрипт генерации пароля с возможностью просмотра генерированного пароля под звездочками

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
...
<script type="text/javascript">
$(document).ready(function() {
//Скрипт генерации паролей
    function str_rand() {
        var result       = '';
        var words        = '0123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM';
        var max_position = words.length - 1;
            for( i = 0; i < 10; ++i ) {
                position = Math.floor ( Math.random() * max_position );
                result = result + words.substring(position, position + 1);
            }
        return result;
    }
    $('.showPassword').click(function(){
        var inputPsw = $('#password');
        if (inputPsw.attr('type') == 'password') {
            document.getElementById('password').setAttribute('type', 'text');
        } else {
            document.getElementById('password').setAttribute('type', 'password');
        }
    });
    $('.generatePassword').click(function() {
        document.getElementById('password').setAttribute('type', 'text');
        $('#password').attr('value', str_rand());
    });
});
</script>
....

<input type="password" name="password" id="password" />
<a href="#" class="showPassword">Показать /a>
<a href="#" class="generatePassword">Сегенерировать /a>

• 2.97
• 1
• 2
• 3
• 4
• 5

Голосов: 1686 | Просмотров: 3982