Passyriot.js

Passyriot.js — jQuery плагин, позволяющий показывать и скрывать пароль за звёздочками.

Работает только с <input type="password" />, это позволяет откатиться к обычному полю с паролем, если в браузере отключен JavaScript.

Пример работы

Особенности

Работает напрямую с инпутом, не создавая маски поверх него: оформление у поля не может сломаться.
Сохраняет все аттрибуты поля, включая измененные динамически.
Сохраняет фокус при переключении.
Сохраняет каретку и выделенные участки.
Может прятать пароль при потере фокуса.
По сути, type="password" меняется на type="text" и обратно.
Автоматически инициализируется, собирая опции из data-атрибутов.

Базовое использование

Подключите jQuery (1.7.2 и новее), passyriot.js и passyriot.css

Добавьте к полю с паролем класс passyriot

 <head>
     <script src="jquery.js"></script>
 	<link rel="stylesheet" href="passyriot.css" />
 	<script src="passyriot.js">
 </head>
 <body>
 	<input type="password" class="passyriot" />
 </body>

Инициализация

У Passyriot.js есть два способа инициализации:

Автоматический: плагин сам начинает работать на нужных полях с классом passyriot.
Привычный для jQuery: $('.some-class').passyriot(). В этом случае можно использовать любой айди, или класс, кроме зарезервированного .passyriot.

Настройка отображения

Весь внешний вид плагина настривается в стилях.

Позиция переключателя:

.passy__trigger {
	margin-left: -23px;
	margin-top: 4px;
}

Иконка:

.passy__icon {
	width: 16px;
	height: 16px;
	background: url('icon.png') no-repeat
}
.passy__icon_closed {
	background-position: 0 0;
}
.passy__icon_opened {
	background-position: 0 -16px;
}

В примере стандартная иконка изменена на SVG.

Опции

defaulttype: "password" / "text" — показывать или скрывать символы по-умолчанию
titleofshow: "Show simbols" — подсказка на глазике
titleofhide: "Hide simbold"
iconclass: passy__icon — класс иконки
iconopenedclass: passy__icon_opened
iconclosedclass: passy__icon_closed
hideonblur: false / true — прятать символы при потере фокуса (приоритет над defaulttype)
auto: true / false — автоматическая инициализация

Опции можно прописывать как в data-атрибутах, так и в массиве, передающимся плагину. У data-атрибутов приоритет будет выше.

Пример с data-атрибутами:

<input type="password" class="passyriot" data-titleofshow="Показать символы" data-defaulttype="password" />

Пример с передачей массива:

<script>
  $(function() {
	$('input[type="password"]').passyriot({
		defaulttype: "password",
		titleofshow: "Показать символы"
	});
  });
</script>

Колбэки

onTriggerClick: function(data){}
onTypeChange: function(data){}

Принимают параметр data, где data.node — DOM элементы; data.info — информация о текущих состояниях (например, data.info.nowType / data.info.nextType); data.options — опции.

input.passyriot({
	onTypeChange: function(data) {
		if(data.info.nowType==='text'){
			$('.some-hint').html('Показать пароль!');
		} else {
			$('.some-hint').html('Скрыть!');
		}    		
	}
})

АПИ

input.passyriot('type', 'toggle')
input.passyriot('type', 'password')
input.passyriot('type', 'text')
input.passyriot('type')	
input.passyriot('destroy')

rmnv/Passyriot