как изменить Слово на кнопке
Есть форма ввода пароля и есть кнопка "Показывать пароль". Скрипт работает на ура, только вот не могу врубиться как решить вопрос:
Если произошёл клик по кнопке "Показывать пароль", то соответственно надпись должна смениться на "Скрыть пароль". И наоборот соответственно.
<fieldset>
<script>
function Show_HidePassword(id) {
element = document.getElementById(id);
if (element.type == 'password') {
var inp = document.createElement("input");
inp.id = id;
inp.type = "text";
inp.value = element.value;
element.parentNode.replaceChild(inp, element);
}
else {
var inp = document.createElement("input");
inp.id = id;
inp.type = "password";
inp.value = element.value;
element.parentNode.replaceChild(inp, element);
}
}
</script>
<input placeholder="Пароль" type="password" name="password" id="passwordbox" />
<span><a href="#" onclick="Show_HidePassword('passwordbox')">Показывать пароль</a></span>
</fieldset>
|
<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;
element.parentNode.replaceChild(inp, element);
}
else {
button.textContent = 'Показывать пароль';
var inp = document.createElement("input");
inp.id = id;
inp.type = "password";
inp.value = element.value;
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>
|
То что надо :) + в карму
|
Появилась другая проблема.
Вобщем всё настроил как надо, только вот если сделать пароль видимым и нажать кнопку 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>
|
Атрибут name потерял
|
Я перерыл мануалы по js и html, ну не может мой мозг догнать: Как сделать? :help:
|
Ну вот что-то вышло:
<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>
|
| Часовой пояс GMT +3, время: 11:53. |