Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как открыть текст в инпуте с type=password? (https://javascript.ru/forum/events/32153-kak-otkryt-tekst-v-inpute-s-type%3Dpassword.html)

Kotakota 05.10.2012 07:13

Как открыть текст в инпуте с type=password?
 
Привет.
Есть инпут:
<input type=password>

соответственно когда вводим текст в это поле, он маскируется символом: *
Как с помощью javascript показать текст закрытый звездочками в поле с "type=password"?
Пробовал динамически заменить type у инпута с password на text, но естественно это ничего не изменило.
Как можно осуществить задуманное или это вообще невозможно сделать?

bes 05.10.2012 08:01

не работает только в IE
подменять на input type="text" c value от input type="password"

Kotakota 05.10.2012 08:13

Почему то не работает такой код:
function ShowHidePassword(id) {
element = document.getElementById(id);
if element.type == 'password' {
element.type = 'text'
}
else {
element.type = 'password'
}
}

В HTML следующий код:
<input type="password" id="pid">
<a href="#" onclick="ShowHidePassword('pid')">

Текст введенный в поле не показывается. По прежнему остаются символы *

bes 05.10.2012 08:17

в IE только и не работает

lord2kim 05.10.2012 08:28

Kotakota,
<script>
function ShowHidePassword(id) {
element = document.getElementById(id);
if (element.type == 'password') {
/*element.type = 'text';
element.value = element.value;*/
var inp = document.createElement("input");
inp.id = id;
inp.type = "text";
inp.value = element.value;
//alert(inp.parentNode.tagName);
element.parentNode.replaceChild(inp, element);
}
else {
/*element.type = 'password';
element.value = element.value;*/
var inp = document.createElement("input");
inp.id = id;
inp.type = "password";
inp.value = element.value;
element.parentNode.replaceChild(inp, element);
}
}  
</script>
<input type="password" id="pid">
<a href="#" onclick="ShowHidePassword('pid')">click</a>

bes 05.10.2012 08:50

<input type="password">
<input style="display: none;">
<input type="button" value="show/hide">
<script>
window.onload = function () {
	function f(el1, el2) {
		el2.style.display  = 'inline';
		el1.style.display = 'none';
		el2.value = el1.value;
	}
	var els = document.body.children;
	els[2].onclick = function () {
		if (navigator.userAgent.indexOf('MSIE') != -1) {
			if (els[1].style.display != 'inline') {
				f(els[0], els[1]);
			} else {
				f(els[1], els[0])
			}
			return;
		}
		if (els[0].getAttribute('type') != 'text') {//
			els[0].setAttribute('type', 'text');
		} else {
			els[0].setAttribute('type', 'password');
		}
	}
}
</script>

либо через insertAdjacentHTML

Kotakota 05.10.2012 12:44

Благодарю за ответы!

Aetae 06.10.2012 04:09

Нахрена только мудрить с проверкой на ие - непонятно.

bes 06.10.2012 09:29

Цитата:

Сообщение от Aetae
Нахрена только мудрить с проверкой на ие - непонятно.

для понта ;) (шутка)
решение со сменой type всё же логичнее и проще и не подходит только для IE<9, поэтому основывать решение изначально на костыле имхо не гуд, потом только удалить кусок костыльного кода

Kotakota 06.10.2012 23:18

В конечном итоге с использованием JQuery получилось так:
<script language="Javascript">
function ShowHidePassword(id){
element = $('#'+id)
element.replaceWith(element.clone().attr('type',(element.attr('type') == 'password') ? 'text' : 'password'))
}
</script>


Часовой пояс GMT +3, время: 09:07.