FlavienR/PasswordEye.html

## PasswordEye.html
<html>
  <body>
    <input type="password" id="passwordInput">
    <img id="seePasswordImg" src="data:image/png;base64,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"/>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
    $(function() {
        var element = $('#seePasswordImg');
        // Prevent dragging
        element.bind('dragstart', function (event) { event.preventDefault(); });

        element.mousedown(function() {
            $('#passwordInput').attr('type', 'text');
        });

        element.mouseup(function () {
            $('#passwordInput').attr('type', 'password');
        });

        element.mouseout(function () {
            $('#passwordInput').attr('type', 'password');
        });
    });
  </script>
  <style>
    #seePasswordImg
    {
      position: relative;
      top: 1px;
      right: 30px;
      height: 10px;
      width: auto;
      opacity: 0.6;
    }
    #passwordInput
    {
      padding-right: 26px;
    }
  </style>
  </body>
</html>
	<html>
	<body>
	<input type="password" id="passwordInput">
	<img id="seePasswordImg" src="data:image/png;base64,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"/>

	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script>
	$(function() {
	var element = $('#seePasswordImg');
	// Prevent dragging
	element.bind('dragstart', function (event) { event.preventDefault(); });

	element.mousedown(function() {
	$('#passwordInput').attr('type', 'text');
	});

	element.mouseup(function () {
	$('#passwordInput').attr('type', 'password');
	});

	element.mouseout(function () {
	$('#passwordInput').attr('type', 'password');
	});
	});
	</script>
	<style>
	#seePasswordImg
	{
	position: relative;
	top: 1px;
	right: 30px;
	height: 10px;
	width: auto;
	opacity: 0.6;
	}
	#passwordInput
	{
	padding-right: 26px;
	}
	</style>
	</body>
	</html>