CODEWITHSUNDEEP
jqueryhtmlcss
waheed Asghar
waheed Asghar

Reputation: 95

Move show /Hide password link inside the Password field

I have build a password show/hide functionality and it works perfectly fine. But I am facing a problem. I want to show the show/hide link inside the password field.

Kindly see the screenshot in the link and help me if you know how to do this.

http://screencast.com/t/vH0wc4TSU

      $("#showHide").click(function () {
        if ($(".login-field-password").attr("type") == "password") {
            $(".login-field-password").attr("type", "text");
            $("#showHide").text("Hide");

        } else {
            $(".login-field-password").attr("type", "password");
            $("#showHide").text("Show");
        }
    });
    <div class="form-group" >
                    <br />
						<label class="top">Your Account Password</label>
                    <input class="login-field  login-field-password form-control input-lg" name="password-2" id="password-2" type="password" placeholder="Password"  />
                    <a type="button" id="showHide">Show
                    </a>

				</div>

Upvotes: 2

Views: 2952

Answers (2)

Lal
Lal

Reputation: 14810

See this fiddle

Wrap both your input and your <a> inside a container, position this container as relative, and the <a> as absolute. You can now do whatever you like with the <a>.

See the HTML below

<div class="form-group">
  <br />
  <label class="top">Your Account Password</label>
  <div class="input-cont">    
    <input class="login-field  login-field-password form-control input-lg" name="password-2" id="password-2" type="password" placeholder="Password" />
    <a type="button" id="showHide">Show
                </a>    
  </div>    
</div>

and the CSS

.input-cont {
  position: relative;
  display: inline-block;
}    
.input-cont a {
  position: absolute;
  right: 0;
  top: 1px;
}

See the updated fiddle with bootstrap css linked

Upvotes: 1

Wind Mee
Wind Mee

Reputation: 25

Make the .form-group position relative Make #showHide position absolute and use the right and top css parameters to position the #showHide over the input field. Make sure you don't overlap the complete field, that way users will not be able to inset a password

Upvotes: 0

Related Questions