Когда пользователь нажимает кнопку "Показать ссылку", отображает пароль, скрывает его при повторном нажатии

Ответ 1

вы не использовали document on для getElementById

function toggle_password(target){
    var d = document;
    var tag = d.getElementById(target);
    var tag2 = d.getElementById("showhide");

    if (tag2.innerHTML == 'Show'){
        tag.setAttribute('type', 'text');   
        tag2.innerHTML = 'Hide';

    } else {
        tag.setAttribute('type', 'password');   
        tag2.innerHTML = 'Show';
    }
}

ваши имена id являются незаконными и трудными для работы: pwd'.$x.' у вас не может быть некоторых из этих символов.

Спецификация HTML 4.01 указывает, что маркеры ID должны начинаться с буквы ([A-Za-z]), за которой может следовать любое количество букв, цифр ([0-9]), дефис (-), подчеркивание (_), colons (:) и периоды (.).

также этот метод не будет работать во всех браузерах, в IE < 9, например, вы можете изменить только .type, прежде чем элемент будет прикреплен к документу

попробуйте заменить их:

function swapInput(tag, type) {
  var el = document.createElement('input');
  el.id = tag.id;
  el.type = type;
  el.name = tag.name;
  el.value = tag.value; 
  tag.parentNode.insertBefore(el, tag);
  tag.parentNode.removeChild(tag);
}

function toggle_password(target){
    var d = document;
    var tag = d.getElementById(target);
    var tag2 = d.getElementById("showhide");

    if (tag2.innerHTML == 'Show'){

        swapInput(tag, 'text');
        tag2.innerHTML = 'Hide';

    } else {
        swapInput(tag, 'password');   
        tag2.innerHTML = 'Show';
    }
}

надеюсь, что это поможет -ck

Ответ 2

Вот пример, используя jQuery (pastebin):

$(document).ready(function() {
  $("#showHide").click(function() {
    if ($(".password").attr("type") == "password") {
      $(".password").attr("type", "text");

    } else {
      $(".password").attr("type", "password");
    }
  });
});

#showHide {
  width: 15px;
  height: 15px;
  float: left;
}
#showHideLabel {
  float: left;
  padding-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Password:</td>
    <td>
      <input type="password" name="password" class="password" size="25">
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type="checkbox" id="showHide" />
      <label for="showHide" id="showHideLabel">Show Password</label>
    </td>
  </tr>
</table>

Ответ 3

Из-за соображений безопасности вы не можете изменить тип элемента ввода. Вы должны заменить весь элемент на новый.

Ответ 4

Его очень легко достичь... Я нашел это сообщение в блоге, в котором описывается способ сделать это с помощью нескольких строк кода. Я думаю, что это не очень хорошая практика, чтобы сохранить такой вариант, потому что к паролям нужно относиться серьезно.

вот код с этой страницы; он использует тот же подход, что и вы описали. но использует check-box.and практически я видел то, что он указывает в oss, как linux. они даже не оставляют следов пароля со звездочкой (но это делает gui, не знаю, что они действительно заботятся о конфиденциальности pw, или им трудно сделать это в командной строке;-))

var textbox_elem = document.getElementById("password");
    if(check_box.checked)
    textbox_elem.setAttribute("type", "text");
    else
    textbox_elem.setAttribute("type", "password");

Ответ 5

http://www.voidtricks.com/password-show-hide-checkbox-click/ Это простой учебник, показывающий пароль в поле ввода, когда флажок установлен и спрятан, когда флажок снят с помощью jQuery.

Javascript

<script type="text/javascript">
 $(document).ready(function () {
 $("#showHide").click(function () {
 if ($(".password").attr("type")=="password") {
 $(".password").attr("type", "text");
 }
 else{
 $(".password").attr("type", "password");
 }

 });
 });
</script>

<!-- language: lang-html -->

HTML  *

<input type="password" class="password"><br>
    <input type="checkbox" id="showHide"> Show?

*   У нас есть поле ввода пароля с классом "пароль" и флажок с идентификатором "showHide"

Простое решение для показа/скрытия пароля с помощью флажков, и это уровень noob просто копирует/вставляет. СДЕЛАННЫЙ!!!; -)

Ответ 6

Если мы создаем тип текстового поля как "passowrd", то символы не отображаются, но когда мы создаем текстовый тип "text", символы отображаются по мере ввода.

Следовательно, логика очень проста. Мы можем изменить тип любого элемента HTML с помощью функции "setAttribute(type,newvalue)" JavaScript.

Полный пример кода можно увидеть по ссылке ниже:

http://www.tutor4web.com/javascript/how-to-show-password-as-text-with-checkbox-using-javascript/

Ответ 7

ваше решение может быть

function toggle_pass(){
    var pass = document.getElementById('showhide').innerHTML;
        if(pass=="show")
         {
            document.getElementById('pwd0').type = "text";
            pass= "Hide";
         }
        else
         {
            document.getElementById('pwd0').type = "password";
            pass = "Show Password";
         }
}

Ответ 8

Вы можете использовать встроенную script для простой реализации show/hide password.

   

 <form>
    <input 
    onmouseover="this.setAttribute('type','text')"               
    onmouseout="this.setAttribute('type','password')" 
    placeholder="Hover to show password!" 
    type="password" 
    name="password-login"
    id="password-login"
    >
    </form>   

Ответ 9

Хотя на вопрос все еще есть ответ, я все еще отправляю этот ответ.

    function toggle_password () {
    var tag = document.getElementById("pwd0");
    var tag2 = document.getElementById("showhide");
    if (tag2.innerHTML == 'Show'){
        tag.type="text";   
        tag2.innerText = 'Hide';
    }
    else {
        tag.type="password";   
        tag2.innerText = 'Show';
    }

    }

<label for="pwd0">Password:</label>
<input type="password" value="####" name="password" id="pwd0" />
<a href="#" onclick="toggle_password();" id="showhide">Show</a>

Ответ 10

Я считаю, что это то, что вы хотели:

function toggle_password(){
  var d = document;
  var tag = d.getElementById("pwd");
  var tag2 = d.getElementById("showhide");
  if (tag2.innerHTML == 'Show'){
    tag.setAttribute('type', 'text');
    tag2.innerHTML = 'Hide';
  } else {
    tag.setAttribute('type', 'password');
    tag2.innerHTML = 'Show';
  }
}

#input_field{
  margin:25px;
  padding:25px;
  border:5px solid black;
}

<html>
<head>
</head>
<body>
 <div id="input_field">
  <label for="pwd">Password:</label>
  <input type="password" value="" name="password" id="pwd" />
  <a href="#" onclick="toggle_password();"                         
  id="showhide">Show</a>
 <div>
</body>
</html>

Ответ 11

Это полный ответ:

<!DOCTYPE html>
<html>
<head>
<title>Show/Hide password (button)</title>
</head>
<body>
<input type="password" id="i">
<input type="button" value="Show Password" onclick="f()" id="k"></input>
<script>
function f() {
var a=document.getElementById("i");
if (a.getAttribute("type")==="password")  {
document.getElementById("i").setAttribute("type","text");
document.getElementById("k").setAttribute("value","Hide Password");
}
else {
document.getElementById("i").setAttribute("type","password");
document.getElementById("k").setAttribute("value","Show Password");
}
}
</script>
</body>
</html>

Источник: https://www.youtube.com/watch?v=OcfL8qJNaQY

Ответ 12

Не меняйте тип ввода, изменяйте размер текста. Сделайте его очень маленьким для Hide.