在javascript中切换标签元素
在javascript中切换标签元素
提问于 2009-12-18 17:29:17
大家好，我最近问过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谢谢
回答 4
Stack Overflow用户
回答已采纳
发布于 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’;
}
}
} Stack Overflow用户
发布于 2009-12-18 17:55:15
总有一天我会花时间写下这项技术的细节，但在过去的六个月里，我的tmp目录中一直有一个有效的实现：http://dorward.me.uk/tmp/label-work/example.html
Stack Overflow用户
发布于 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1927207
复制相关文章
相似问题
腾讯云开发者
