меню

Предисловие

Совсем недавно решил написать генератор пароля с возможностью просмотра генерированного пароля под звездочками. Для работы выбрал 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>

Возможно, вам будет интересно

Youtube несколько видео на странице и стоп проигрывания предыдущего видео.

Youtube несколько видео на странице. Как сделать остановку предыдущего видео, при запуске следующего? На сайте расположено на одной странице три видео. При включении нужно чтобы другое видео, если запущено , останавливалось. Как это реализовать?

Семь важных функций JavaScript

Раннее в JavaScript, когда почти для всего нужна была специальная функция, потому что браузеры реализовывали по своему не только новые, но и базовые функции, такие как addEventListener и attachEvent. Времена изменились, но есть несколько функций, которые каждый разработчик должен иметь в своем арсенале, чтобы повысить производительность работы.

Как отключить ввод текста по переключателю disabled

В данном материале будет представлен самый простой способ включения и отключения ввода информации в текстовое поле INPUT=TEXT с помощью библиотеки jQuery и html атрибута disabled.

Видео самоучитель jQuery от Envato

Видео курс от компании Envato, Видео курс на английском языке. jQuery - это библиотека, которая значительно упрощает и ускоряет написание JavaScript кода. Видео курс самоучителя jQuery позволит Вам научится работать на нем. Пройдя данный курс Вы научитесь основам работы с jQuery!

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту