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

我希望我的网页在密码字段内显示复选框。用户单击复选框并将密码看作文本。取消检查后，再次输入密码。如何在输入密码字段中插入复选框

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

这是我得到

我想要的密码字段中此复选框。在这个话题上我找不到任何东西。

这里是我的代码：

<!-- 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';" />

来源

2016-09-30 Anuvrat Tiku

我想你可以通过CSS的定位属性做到这一点，给输入元件的相对位置，以及复选框绝对位置，这样就可以相对移动复选框输入。 – Aparna

只需添加CSS和移动你的复选框，以输入文本一个格。见例如

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

Click Here

来源

2016-09-30 06:16:48

谢谢哥们..工作 –

不客气@AnuvratTiku –

这将是解决办法。

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

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

来源

2016-09-30 06:14:15

为什么你使用'transition：right 0.2s;'？ – 3rdthemagical

@ 3rdthemagical删除它。 –

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

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

来源

2016-09-30 06:16:03 Dhaarani

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

来源

2016-09-30 06:29:43 Shahzaib

请包括一些解释与代码。 – Ankit

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

回答

相关问题