パスワードテキストエリアにプレーンテキストを表示

パスワードテキストエリアにプレーンテキストを表示するには、チェックボックスをクリックします。パスワードテキストエリアにプレーンテキストを表示

<!DOCTYPE html> 
<html> 
<head> 

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> 

<title>None</title> 

<script type='text/javascript'>//<![CDATA[ 
$(function(){ 
//Place this plugin snippet into another file in your applicationb 
(function ($) { 
    $.toggleShowPassword = function (options) { 
     var settings = $.extend({ 
      field: "#password", 
      control: "#toggle_show_password", 
     }, options); 

     var control = $(settings.control); 
     var field = $(settings.field) 

     control.bind('click', function() { 
      if (control.is(':checked')) { 
       field.attr('type', 'text'); 
      } else { 
       field.attr('type', 'password'); 
      } 
     }) 
    }; 
}(jQuery)); 

//Here how to call above plugin from everywhere in your application document body 
$.toggleShowPassword({ 
    field: '#password1', 
    field: '#password2', 
    control: '#checkbox1' 
}); 
});//]]> 

</script> 

</head>  
<body> 

Password: <input type="password" id="password" value="a" /> 

Password 2: <input type="password" id="password2" value="a" /> 

<input id="checkbox1" type="checkbox" />Show password 

</body> 
</html>

出典

2016-04-04 Blnukem

Javascriptオブジェクトは、同じ名前（フィールドとフィールド）を持つ2つのキーを持つことはできません。 – Hypaethral

を使用すると、複数回同じプロパティ名をオブジェクトを定義した場合、それは最後の値だけが与えられ、それを代入するすべてのこのfiddle

ファーストを参照してください。したがって

$.toggleShowPassword({ 
    field: '#password1, #password2', 
    control: '#checkbox1' 
});

これを修正します。

Password: <input type="password" class="togglepassfield" id="password" value="a" /> 
Password 2: <input type="password" class="togglepassfield" id="password2" value="a" />

し、クラス名を使用して：：

第二に、あなたの最初のpasswordboxのidは、「パスワードは」あなたがそうのような入力フィールドにクラスを追加してみてください1.

出典

2016-04-04 20:38:40 Toonijn

ありがとうToonijnは完璧に動作します – Blnukem

代わりに（2回それを定義）fieldオプションを上書きする：私はそれがテキストボックスのの1のために働いていますが、私はそれが、これは私がこれまで持っているコードの両方で動作するように取得したいと思い、その中に両方の入力IDを置く：

$.toggleShowPassword({ 
    field: '#password, #password2', 
    control: '#checkbox1' 
});

出典

2016-04-04 20:38:01 blex

なしです

$.toggleShowPassword({ 
    field: '.togglepassfield', 
    control: '#checkbox1' 
});

出典

2016-04-04 20:47:12 AimqEz

パスワードテキストエリアにプレーンテキストを表示

答えて

関連する問題