【jQuery】パスワードを表示させる


```js:show_password.js

/*

	Better Password Fields with jQuery
	http://www.danwellman.co.uk/better-password-fields-with-jquery/

*/

//add click handler for show-plain link(s)
$(".show-plain").live("click", function() {

  //cache selector
  var input = $(this).prev();

  //create new text input
  $("<input>").attr({
    id: input.attr("id"),
    type: "text",
    name: input.attr("name")
  }).val(input.val()).addClass(input.attr("class")).insertAfter(input.prev());
  input.remove();

  //change link text and attributes
  $(this).text("Hide password").removeClass("show-plain").addClass("show-hidden").attr({
    title: "Obscure the text"
  });

  //stop link being followed
  return false;
});

//add click handler for show-plain link(s)
$(".show-hidden").live("click", function() {

  //cache selector
  var input = $(this).prev();

  //create new password input
  $("<input>").attr({
    id: input.attr("id"),
    type: "password",
    name: input.attr("name")
  }).val(input.val()).addClass(input.attr("class")).insertAfter(input.prev());
  input.remove();

  //change link text and attributes
  $(this).text("Show password").removeClass("show-hidden").addClass("show-plain").attr({
    title: "Show the password in plain text"
  });

  //stop link being followed
  return false;
});

```

```html:パスワードを表示させるサンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Better Password Fields</title>
</head>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript" src="show_password.js"></script>
<body>
 
<h3>Better Password Fields</h3>

<form>
   <label for="pass">Password:</label><input id="pass" name="pass" type="password"><br/>
   <label for="pass2">Password:</label><input id="pass2" name="pass2" type="password"><br/>
</form>

<br/>
<br/>
参考
<br/>
<p>
http://www.danwellman.co.uk/better-password-fields-with-jquery/
</p>
<script type="text/javascript">

//show password with jQuery
jQuery(function($){
  $("form").find("input[type='password']").each(function(val) {
    var input = $(this);
    //insert link to show plain-text
    $("<a>").text("Show password").addClass("show-plain")
            .attr({title: "Show the password in plain text",
	            href: "#"
            }).insertAfter(input);
  });
});

</script>
</body>
</html>

```

##画面イメージ
![画像.png](https://qiita-image-store.s3.amazonaws.com/0/38271/6e096643-559a-eadd-e198-2697d878f54c.png)

##解説
input要素「type="password"」指定をしたパスワードフィールドでは、パスワードが●に置き換わり読むことができないが、必要に応じて、パスワード表示/非表示をjQueryで実現する方法が、
Better Password Fields with jQuery
http://www.danwellman.co.uk/better-password-fields-with-jquery/
に紹介されている。
これを少し変えた。
jquery-1.7.min.jsを使っている。

###追記###
jquery-1.7.min.jsでなく、jquery-1.11.1.min.jsを使うなら、「.live」メソッドを「$(document).on」メソッドに変えるだけ動く。

```js:show_password.js

/*

	Better Password Fields with jQuery
	http://www.danwellman.co.uk/better-password-fields-with-jquery/
	jquery-1.11.1.min.js対応版
*/

//add click handler for show-plain link(s)
$(document).on('click', '.show-plain', function() {
  //cache selector
  var input = $(this).prev();

  //create new text input
  $("<input>").attr({
    id: input.attr("id"),
    type: "text",
    name: input.attr("name")
  }).val(input.val()).addClass(input.attr("class")).insertAfter(input.prev());
  input.remove();

  //change link text and attributes
  $(this).text("Hide password").removeClass("show-plain").addClass("show-hidden").attr({
    title: "Obscure the text"
  });

  //stop link being followed
  return false;
});

//add click handler for show-plain link(s)
$(document).on('click', '.show-hidden', function() {

  //cache selector
  var input = $(this).prev();

  //create new password input
  $("<input>").attr({
    id: input.attr("id"),
    type: "password",
    name: input.attr("name")
  }).val(input.val()).addClass(input.attr("class")).insertAfter(input.prev());
  input.remove();

  //change link text and attributes
  $(this).text("Show password").removeClass("show-hidden").addClass("show-plain").attr({
    title: "Show the password in plain text"
  });

  //stop link being followed
  return false;
});

```


##

##参考文献
Better Password Fields with jQuery
http://www.danwellman.co.uk/better-password-fields-with-jquery/