大家好,我最近问过this question,我已经放弃了“替换输入的想法”。相反,我决定尝试另一种方法。
我已经使我的密码字段背景透明,并将<label>
元素放在密码输入的“后面”,这样它看起来就像是密码字段的一部分。现在我写了一个用于切换元素的标准函数,如下所示:
function togglePassword(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
我从密码字段触发此函数onforus和onblur,以便当密码字段被聚焦时标签消失,但我对onblur有问题,因为在我键入密码并在登录提交按钮上按TAB后,<label>
元素再次显示密码值,并与键入的密码混合。
这是它的图像,所以我试着想出一些新的东西。
function togglePassword(obj) {
var el = document.getElementById(obj);
var input_el = document.getElementById('password_field');
if(input_el.value.length > 0)
{
el.style.display = 'none';
}
else {
if ( el.style.display != 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
}
不幸的是,这段代码不能工作。有没有人能指出我哪里搞错了?因此,这第二个代码应该检查密码字段是否为emtpy,如果不为空,则继续切换,如果不为空,则只隐藏密码值。帮助:D谢谢
发布于 2009-12-18 18:12:16
试试这个,会有用的。
function togglePassword(obj) {
var el = document.getElementById(obj);
var input_el = document.getElementById('password_field');
if((input_el.style.display == ‘none’) || ((input_el.style.display=='') && (input_el.offsetWidth==0))){
el.style.display = 'block';
} else {
el.style.display = ‘none’;
}
}
}
发布于 2009-12-18 17:55:15
总有一天我会花时间写下这项技术的细节,但在过去的六个月里,我的tmp目录中一直有一个有效的实现:http://dorward.me.uk/tmp/label-work/example.html
发布于 2009-12-18 18:32:00
我不太理解这个要求,但你应该在你的函数中验证你是否在焦点动作上做了模糊处理,并对此做出了反应。
也许是这样的:
<script type="text/javascript">
function togglePassword(alwaysVisible, labelId, pwdId){
var label=document.getElementById(labelId);
if (alwaysVisible){
label.style.display="";
} else {
var pwd=document.getElementById(pwdId);
label.style.display= (pwd.value.length==0)?"":"none";
}
}
</script>
……
<form>
<label for="pwd" id="labelPwd">Type your password : </label>
<input name="pwd" id="pwd" onfocus="togglePassword(true, 'labelPwd', 'pwd')" onblur="togglePassword(false , 'labelPwd', 'pwd')" type="password">
<input type="submit">
</form>
https://stackoverflow.com/questions/1927207
复制相似问题