如何在输入密码字段中插入复选框
我希望我的网页在密码字段内显示复选框。用户单击复选框并将密码看作文本。取消检查后,再次输入密码。如何在输入密码字段中插入复选框
这是我得到
我想要的密码字段中此复选框。在这个话题上我找不到任何东西。
这里是我的代码:
<!-- 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';" />
谢谢哥们..工作 –
不客气@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>
为什么你使用'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>
.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>
请包括一些解释与代码。 – Ankit
我想你可以通过CSS的定位属性做到这一点,给输入元件的相对位置,以及复选框绝对位置,这样就可以相对移动复选框输入。 – Aparna