Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  
      <form class="form-login" action="/Reports"><!-- hardcoded-->
        <input id="username" type="text" placeholder="Username" />
        <input id="password" type="password"  placeholder="Password"/>
        <input id="submit" type="submit" value="Log in" />
        <br />
        <input id="show-password" type="checkbox" /><label for="show-password">Show Password</label>
    </form>
  
  
</body>
</html>
 
​
 
function changeInputType(inputId, type) {
    var input= $("#" + inputId);  
        $(input).replaceWith($("<input />")
            .val(input.val())
            .attr("placeholder", input.attr("placeholder"))
            .attr("id", inputId)
            .attr("type",type)
        );
}
​
$("#show-password").change(function () {
    if ($(this).attr("checked")) {
        changeInputType("password", "text");
    } else {
        changeInputType("password", "password");
    }
});
​
if ($("#show-password").attr("checked")) {
    changeInputType("password", "text");
}
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers