меню

Предисловие

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

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

Повышение уровня мастерства в JavaScript ES6

Принципы, о которых пойдет речь, являются фундаментальными для этого языка и будут оставаться таковыми независимо от того, какой фреймворк вы используете. Более того, понимание этих концепций окажется бесценным бонусом, когда вы решите изучить или использовать какую-либо популярную библиотеку или фреймворк из арсенала JavaScript.

Сравнение методов require() и import() в JavaScript

Методы require() и import() в JavaScript используются для включения модулей. У них есть несколько важных особенностей, о которых должен знать каждый разработчик.

Использование HTML5-элемента audio в JavaScript

Благодаря тегу audio появившемуся в HTML5, можно очень просто добавлять звук на сайт. В javascript работать со звуком позволяет соответствующий класс Audio, а проверить поддержку формата звукового файла в браузере - метод canPlayType

Вывод последнего дня текущего месяца на Javascript

Попалась интересная задачка, на баннере нужно было выводить «Акция действует до (тут последний день месяца)», решил сделать это на Javascript, ну чтоб не лазить каждый раз в код для правок, вот что получилось

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

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

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

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

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

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

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