如何在输入密码字段中插入复选框

Question

我希望我的网页在密码字段中显示一个复选框。用户单击复选框并将密码视为文本。取消检查，再次输入密码。

这就是我想要的。这是来自Ebay网站的登录页面。

这就是我得到的

我希望密码字段中包含此复选框。我在网上找不到任何关于这个主题的内容。

这是我的代码：

<!-- Set a password for the account -->
<div class="col-md-12" style="margin: 7px;">
    <input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
</div>
<input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" />

Answer 1

只需添加CSS并将复选框移动到带有输入文本的一个组div。 参见示例

#eye {
  position:absolute;
  right:50px;
  top:6px;
}

Click Here

Answer 2

这将是解决方案。

＆＃13;

＆＃13;

.text-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

＆＃13;

<div class="col-md-12 text-container" style="margin: 7px;">
  <input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
  <span id="btn" class="btn"><input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" /></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

input#eye {
    position: absolute;
    right: 10px;
    top: 10px;
}
#reg_password.form-control.input-lg {
    position: relative;
}
.parent{position:absolute;}

＆＃13;

<!-- Set a password for the account -->
<div class="col-md-12 parent" style="margin: 7px;">
    <input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" /> <input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

.text-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.btn {
  position: absolute;
  top: 10px;
  right: 10px;
  transition: right 0.2s;
}

<div class="col-md-12 text-container" style="margin: 7px;">
  <input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
  <span id="btn" class="btn"><input type="checkbox" id="password" /></span>
</div>

<script type="text/javascript">
 $(document).ready(function () {
 $("#password").click(function () {
 if ($("#reg_password").attr("type")=="password") {
 $("#reg_password").attr("type", "text");
 }
 else{
 $("#reg_password").attr("type", "password");
 }

 });
 });
</script>