Здравствуйте Гость!


Запомнить.
Авто. вход.
Забыли пароль?
Регистрация

ПОДПИСКА Подписавшись по E-mail, Вы будете получать уведомления о новых статьях к себе на почту.
Подписатся на почтовую рассылку на сайте astranar.ru
Подписаться



ДОБАВЛЯЙТЕСЬ В ДРУЗЬЯ Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте на стене моего аккаунта.
Мой аккаунт Вконтакте
Мой аккаунт
Главная - Javascript - скрыть/показать символы в type="password" javascript


скрыть/показать символы в type="password" javascript


скрытьпоказать символы в type=

Недавно меня попросил помочь мой один хороший знакомый с кодом. У него стояла задача чтоб при вводе пароля, пользователи его сайта могли посмотреть что они ввели в поле для пароля. И вот эта статья и посвящена тому как открыть текст в инпуте с type=password Ну и собственно это вообще нужная вещь, на многих сильных сайтах это есть. Очень удобная фича, удобно вашим пользователям, а значит не будет ничего раздражать на вашем сайте=) Вот собственно код: 



Показать введенные символы
Думаю тут все понятно, если нет, в комментариях я на все отвечу. Удачи!



Просмотров страницы: 12620
Урок добавлен: 17 Декабря 2012

<<<Предыдущая статьяСледущая статья >>>

Копирование материалов разрешается только с указанием автора (Пальгов Олег) и индексируемой прямой ссылкой на сайт (https://astranar.ru/)!

Добавляйтесь ко мне в друзья ВКонтакте: https://vk.com/palgov_oleg. Если Вы хотите оценить меня и мою работу, то напишите на стене моего аккаунта ВКонтакте.

Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления:
Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Ещё статьи по javascript:
• Смена текста в базе кликом
• События с ссылками при переходе по ссылке, или при закрытии страницы
• Выбор цвета
• Расположение и вызов JavaScript


Комментарии (8)

Василий Чапаев 07 Сентября 2013 в 11:44
Благодарю, это то что я искал.
Ещё вопрос: Как теперь сделать чтобы не пропадал placeholder?

input placeholder="Пароль" type="password" name="password" id="pid"



Василий Чапаев 07 Сентября 2013 в 12:14
И ещё, когда была нажата кнопка "Показать введенные символы" соответственно текст должен измениться на "Скрыть вводимые символы". Как это сделать. Покажите всё в одном коде пожалуйста.



Василий Чапаев 07 Сентября 2013 в 16:31
решено!

<fieldset>
<script>
function Show_HidePassword(id, button) {
var element = document.getElementById(id);
if (element.type == 'password') {
button.textContent = 'Скрывать пароль';
var inp = document.createElement("input");
inp.id = id;
inp.type = "text";
inp.value = element.value;
inp.placeholder = "Пароль";
element.parentNode.replaceChild(inp, element);
}
else {
button.textContent = 'Показывать пароль';
var inp = document.createElement("input");
inp.id = id;
inp.type = "password";
inp.value = element.value;
inp.placeholder = "Пароль";
element.parentNode.replaceChild(inp, element);
}
inp.focus();
inp.selectionEnd = inp.value.length;
}
</script>
<input placeholder="Пароль" type="password" name="password" id="passwordbox" />
<span><a href="#" onclick="Show_HidePassword('passwordbox', this); return false;">Показывать пароль</a></span>
</fieldset>



Василий Чапаев 07 Сентября 2013 в 20:39
Появилась новая проблема. Если сделать пароль видимым и нажать кнопку submit то никакого значения в глобальный массив не будет передано. Как исправить этот недочёт?

<script>
function Show_HidePassword(id, button) {
var element = document.getElementById(id);
if (element.type == 'password') {
button.textContent = 'Скрывать пароль';
var inp = document.createElement("input");
inp.id = id;
inp.type = "text";
inp.value = element.value;
inp.placeholder = "Пароль";
element.parentNode.replaceChild(inp, element);
}
else {
button.textContent = 'Показывать пароль';
var inp = document.createElement("input");
inp.id = id;
inp.type = "password";
inp.value = element.value;
inp.placeholder = "Пароль";
element.parentNode.replaceChild(inp, element);
}
inp.focus();
inp.selectionEnd = inp.value.length;
}
</script>

<form>
<input placeholder="Пароль" type="password" name="password" id="joinpasswordbox" />
<p><span><a href="#" onclick="Show_HidePassword('joinpasswordbox', this); return false;">Показывать пароль</a></span></p>
<p><input type="submit" value="Отправить"/></p>
</form>




Василий Чапаев 07 Сентября 2013 в 22:56
Кое как доделал )))

<script>
function Show_HidePassword(id, button) {
var element = document.getElementById(id);
if (element.type == 'password') {
button.textContent = 'Скрывать пароль';
var inp = document.createElement("input");
inp.id = id;
inp.type = "text";
inp.name = "password";
inp.value = element.value;
inp.placeholder = "Пароль";
element.parentNode.replaceChild(inp, element);
}
else {
button.textContent = 'Показывать пароль';
var inp = document.createElement("input");
inp.id = id;
inp.type = "password";
inp.name = "password";
inp.value = element.value;
inp.placeholder = "Пароль";
element.parentNode.replaceChild(inp, element);
}
inp.focus();
inp.selectionEnd = inp.value.length;
}
</script>

<form>
<input placeholder="Пароль" type="password" name="password" id="joinpasswordbox" />
<p><span><a href="#" onclick="Show_HidePassword('joinpasswordbox', this); return false;">Показывать пароль</a></span></p>
<p><input type="submit" value="Отправить"/></p>
</form>



Олег Пальгов 07 Сентября 2013 в 23:17
Я рад что вы разобрались с проблемой=)))



Ефим Игнатьев 26 Марта 2015 в 19:15
Народ, а как вместо слова показать пароль сделать квадрат с галкой ну checkbox??



Олег Пальгов 30 Марта 2015 в 12:46
Просто пишете:

<input type='checkbox' onclick="Show_HidePassword('joinpasswordbox', this); return false;" />




Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
скрыть/показать символы в type="password" javascript
Не гоняйся за счастьем: оно всегда находится в тебе самом.

Пифагор

Вступайте в группу!