移动显示密码字段中的/Hide密码链接

Question

我已经构建了一个密码显示/隐藏功能，它运行得非常好。但我正面临着一个问题。我想在密码字段中显示“显示/隐藏”链接。

请看屏幕截图在链接和帮助我，如果你知道如何做到这一点。

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>

​

Answer 1

参见此小提琴

将输入和<a>包装在容器中，将该容器定位为相对的，将<a>定位为绝对。现在，您可以使用<a>做您喜欢的任何事情。

见下面的HTML

<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>

和CSS

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

请参阅带有引导css链接的更新小提琴。

Answer 2

使..form group位置相对于Make #showHide位置为绝对，并使用右边和顶部的css参数将#showHide定位在输入字段上。确保不重叠整个字段，这样用户就不能输入密码。