Javascriptパスワードフィールドのトグルボタンの表示/非表示

私はフォームパスワードフィールドに表示/非表示ボタンを実装し、パスワードをプレーンテキストとして表示し、アスタリスクの後ろに非表示にする必要があるプロジェクトに取り組んでいます。Javascriptパスワードフィールドのトグルボタンの表示/非表示

<script> 

function pass(){ document.getElementById('password').type="password"; } 
function text(){ document.getElementById('password').type="text"; } 

</script>

、ボタンのHTMLコード：

<button class="ui-component__password-field__show-hide" type="button" 
onclick="text()">Show</button>

これは、パスワードの表示に切り替えるため正常に動作しますが、どのように私はそれを作るか、私がこれまでに思い付いた何

パスワードが表示されたら、ボタンのテキストを「非表示」に変更し、pass（）関数を実行させますか？

出典

2017-04-13 James

<button class="ui-component__password-field__show-hide" type="button" 
onclick="text(this)">Show</button> 


    function text(item){ 
    if(item.innerText=='Show'){ 
     item.innerText='Hide'; 
     document.getElementById('password').type="password"; 
    }else{ 
    item.innerText='Show'; 
    document.getElementById('password').type="text"; 
    } 


    }

出典

2017-04-13 11:31:10

ありがとう、しかし、それはいくつかの理由のために働いていません。詳しく教える？ – James

@Jamesが答えを更新しました。 –

改善 - 表示と非表示を正しく切り替えるようになりましたが、非表示をクリックするとパスワードが非表示になりました。 – James

HTML：

<input type="password" id="password"> 
<button onclick="toggler(this)" type="button">Show</button>

Javascriptを：

function toggler(e) { 
     if(e.innerHTML == 'Show') { 
      e.innerHTML = 'Hide' 
      document.getElementById('password').type="text"; 
     } else { 
      e.innerHTML = 'Show' 
      document.getElementById('password').type="password"; 
     } 
}

この作業例を確認してください。私は、これはJavaScriptを使用して、パスワードフィールドに/非表示切り替えボタンを表示するためにあなたに

https://jsfiddle.net/ra8ot13y/

出典

2017-04-13 12:09:39

ソリューションを助けることを願っています。

<!DOCTYPE html> 
<html> 
<head> 
<title>Password-Show/Hide</title> 
<script type="text/javascript"> 
//alert("hi"); 
function toggle(){ 
    alert("hello"); 
    var button = document.getElementById("show_hide").innerHTML; 
    var pass = document.getElementById("password"); 
    if(button == "Show Password"){ 
     pass.setAttribute("type","text"); 
     document.getElementById("show_hide").innerHTML = 'Hide Password'; 
    } 
    else{ 
     pass.setAttribute("type","password"); 
     document.getElementById("show_hide").innerHTML = "Show Password"; 
    } 

} 
window.addEventListener("load",function(){ 
    var sh = document.getElementById("show_hide"); 
    sh.addEventListener("click",toggle); 
}); 
</script> 
</head> 
<body> 
<input type="password" name="password" id="password" placeholder="Password" /> 
<button id="show_hide" >Show Password</button> 
</body> 
</html>

出典

2017-09-24 16:57:16

いくつか変更してください。

function text() { 
 
var a=document.getElementById('password'); 
 
var b=document.getElementById('button'); 
 
if (a.type=="password"){ 
 
a.type = "text"; 
 
b.innerText = "Hide"; 
 
} 
 
else { 
 
a.type = "password"; 
 
b.innerText = "Show"; 
 
} 
 
}

<input type="password" id="password"> 
 
<button class="ui-component__password-field__show-hide" type="button" onclick="text()" id="button">Show</button>

出典

2018-02-19 10:31:39 Keshav

可能な限り早くこの回答をご覧ください – Keshav

Javascriptパスワードフィールドのトグルボタンの表示/非表示

答えて

関連する問題