web-dev-qa-db-ja.com

ユーザーが[リンクを表示]をクリックするとパスワードが表示され、もう一度クリックすると非表示になります

この簡単なスクリプトを機能させようとしています。基本的に、ユーザーが[表示]リンクをクリックすると、パスワードテキストボックスにパスワードが表示され、もう一度クリックすると非表示になります。解決策を探しましたが、必要なものが見つかりませんでした。これがコードです：

JavaScript

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

    }

HTML

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

リンクをクリックしても何も起こりません。私はifステートメントも使用せずにこれをテストしましたが、それでも何もしませんでした。

javascripthtmltextboxpasswordsshow-hide
16
Daniel Harris

documentで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]）、ハイフン（-）、下線（_）が続くことが規定されています、コロン（:)、およびピリオド（。）。

また、このメソッドはすべてのブラウザで機能するわけではなく、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に役立つことを願って

14
ckozl

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>

出典：

http://www.voidtricks.com/password-show-hide-checkbox-click/

チェックボックスとそのラベルをブラウザー間で一貫して配置する方法

5
silver

セキュリティ上の理由から、入力要素のタイプを変更することはできません。要素全体を新しい要素に置き換える必要があります。

2
Daff

インラインスクリプトを使用すると、パスワードの表示/非表示を簡単に実装できます。

   

 <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>
1
laxman vijay

達成するのは本当に簡単です...これを見つけました ブログ投稿 数行のコードでそれを行う方法を説明しています。パスワードを真剣に扱う必要があるため、このようなオプションを維持することはお勧めしません。

これがそのページのコードです。説明したのと同じアプローチを使用します。しかし、チェックボックスを使用します。そして、実質的に私は彼がLinuxのようなossで指摘するものを見てきました。彼らはアスタリスクでパスワードの痕跡も残しません（しかし、guiのことは、彼らが本当にpwプライバシーを気にかけていることを知らないか、コマンドラインでそれを行うのが難しいと感じます;-)）

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

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?

*クラス「password」のパスワード入力フィールドとID「showHide」のチェックボックスがあります

チェックボックスを使用してパスワードを表示/非表示にする簡単なソリューションです。これは、コピー/貼り付けするだけのnoobレベルです。完了!!! ;-)

1
spacedev

私はこれがあなたが望んだ方法だと信じています：

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>
0
keval

あなたの解決策は

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";
         }
}
0
Pravarna Bidisha

質問にはまだ答えがありますが、私はまだこの答えを投稿しています。

    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>
0
user8158111

テキストボックスタイプを_"passowrd"_として作成すると、文字は表示されませんが、テキストボックスタイプを作成すると、入力時に_"text"_文字が表示されます。

したがって、ロジックは非常に単純です。 JavaScriptの"setAttribute(type,newvalue)"関数を使用して、任意のHTML要素のタイプを変更できます。

完全なコード例は、以下のリンクで確認できます。

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

0
tutor4web.com