javascript - 为什么无法实现表单原件失去焦点后改变提示的样式?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-16 13:38:30
[HTML讨论组]

要实现一个表单,在输入密码一栏中如果没有输入或两次输入不一致则显示提示,否则隐藏。但是提示始终出不来,求助是为什么呢?





 

用户登录验证



  • 用户名:
  • 输入密码:
  • 确认密码:

密码不能为空!

密码不一致!

css代码:

@charset "utf-8";
/* CSS Document */
body{font-size:14px; font-family:"微软雅黑";}

body,p,ul,li{margin:0; padding:0; list-style:none;}

.bg{
    width:400px;
    height:180px;
    margin:50px;
    border:3px double #ccc;
    padding:40px;
    background:#CCC;
}


ul{float:left;}

li{
    text-align:right;
    height:50px;
}

.list{float:left;}

p{
    width:320px;
    height:50px;    
}

span{
    float:left;
    padding:0 0 0 10px;
    color:red;
}

#pwd{}
曾经蜡笔没有小新
曾经蜡笔没有小新

全部回复(1)
仅有的幸福

找到你代码中如下这段

        <p><input type="password" onblur="checkEmpty(this)" id="pwd"/>
        <span style="display:none">密码不能为空!</span></p>
        <p><input type="password" onblur="checkPwd(this)"/>
        <span style="display:none">密码不一致!</span></p>

请删掉 <input/>和<span>之间的换行即可。

原因
DOMElement.nextSibling属性返回该节点下一个同级DOM元素,换行或者空格都算做一个#text类型的节点。之前你的代码nextSibling返回的一个文本节点,在其上设置style属性,当然不能达成你的需求。

如果不信,你还可以验证一下:不改变你的html代码,把脚本中 DOMElement.nextSibling换成 DOMElement.nextSibling.nextSibling 也能正常工作。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号