htmlヘルパーを使用してmvcのパスワード隠しフィールドを表示する方法

Question

@Html.Password("pasword", null, new { @class = "form-control frmField", placeholder = "Password" }) 

私はこれを使用しています。クリックするとパスワードが表示されます。私はこれがjqueryまたはJavascriptを介して行われることを知っていますが、私はmvcでそれを理解することはできません。どのようにmvcでそのテクニックを適用するには？

<input data-toggle="password" type="password" data-placement="after" data-eye-class="glyphicon" data-eye-open-class="glyphicon glyphicon-eye-open" data-eye-close-class="glyphicon glyphicon-eye-close" data-eye-class-position="true" class="form-control pwd"> 
<input type="text" class="form-control" placeholder="password" style="display:none;" /> 

私はこれを使用しており、正常に動作しました。どのようにmvcでこれを実装するには？

Answer 1

$("#Password").attr("type","text") 

ちょうどあなたのセレクターで#Passwordを交換し、あなたが戻ってそれを変更したい場合だけ実行します。

$("#Password").attr("type","password") 

Answer 2

変更パスワードタイプ

$(".btnShow").mousedown(function() { 
 
    $(".pwd").attr("type","text"); 
 
}); 
 
$(".btnShow").on("mouseleave",function() { 
 
    $(".pwd").attr("type","password"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="password" class="form-control pwd"> 
 
<input type="button" class="btnShow" value="show"/>

タイプテキスト に

Answer 3

これを実現するには、ページにJavaScriptを追加します。ここにあなたの参考資料があります。

@Html.Password("pasword", null, new { @class = "form-control frmField", placeholder = "Password" }) 
<input type="button" id="showHidePassword" value="Show" /> 

<script> 
    $("#showHidePassword").click(function(){ 
     if($(this).val() == "Show"){ 
      $(this).val("Hide"); 
      $("#password").attr("type", "text"); 
     } else { 
      $(this).val("Show"); 
      $("#password").attr("type", "password"); 
     } 
    }); 
</script> 

Answer 4

<input id="passwordField" data-toggle="password" type="password" data-placement="after" data-eye-class="glyphicon" data-eye-open-class="glyphicon glyphicon-eye-open" data-eye-close-class="glyphicon glyphicon-eye-close" data-eye-class-position="true" class="form-control pwd"> 
<input type="checkbox" onclick="ShowHidePass(this)" /> 

がパスワードとテキストボックスの間

function ShowHidePass(objChk) 
{ 
if(objChk.checked) 
    passwordField.type="text" 
    else 
    passwordField.type="password" 
}