Question

我已经构建了密码显示/隐藏功能，它的工作原理非常好。但我遇到了一个问题。我想在密码字段中显示show / hide链接。

请参阅链接中的屏幕截图，如果您知道如何操作，请帮助我。

      $("#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

使.form-group位置相对将#showHide置于绝对位置，并使用右侧和顶部css参数将#showHide放在输入字段上。确保不与整个字段重叠，这样用户将无法插入密码

Answer 2

请参阅此fiddle

将您的输入和<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;
}

请参阅updated fiddle并附带bootstrap css链接

在密码字段内移动显示/隐藏密码链接

2 个答案:

请参阅此fiddle