recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Pourquoi ne puis-je pas modifier le style de l'invite une fois que le formulaire d'origine a perdu le focus?

Pour implémenter un formulaire, s'il n'y a aucune saisie dans la colonne de saisie du mot de passe ou si les deux saisies sont incohérentes, l'invite sera affichée, sinon elle sera masquée. Mais l'invite ne s'affiche jamais. Pourquoi ai-je besoin d'aide ? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="checkload.css" rel="stylesheet" /> 
<script type="text/javascript">
function checkEmpty(obj){
    if(!obj.value)
        obj.nextSibling.style.display="block";
    else 
        obj.nextSibling.style.display="none";    
}
    
function checkPwd(obj){
    var pwd = document.getElementById("pwd").value;
    var pwdAgain = obj.value;
    if(pwd != pwdAgain)
        obj.nextSibling.style.display="block";
    else
        obj.nextSibling.style.display="none";
}
</script>
<title>用户登录验证</title>
</head>

<body>
<form class="bg">
    <ul>
        <li>用户名：</li>
        <li>输入密码：</li>
        <li>确认密码：</li>
    </ul>
    <p class="list">
        <p><input type="text"/></p>
        <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 type="submit" />
    </p>
</form>
</body>
</html>

code 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{}
曾经蜡笔没有小新曾经蜡笔没有小新2756 Il y a quelques jours485

répondre à tous(1)je répondrai

  • 仅有的幸福

    仅有的幸福2017-05-16 13:40:30

    Retrouvez le paragraphe suivant dans votre code

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

    Veuillez supprimer le saut de ligne entre <input/> et <span>.

    La propriété

    Reason
    DOMElement.nextSibling renvoie l'élément DOM frère suivant du nœud. Les sauts de ligne ou les espaces sont comptés comme un nœud de type #text. Votre code précédent nextSibling renvoie un nœud de texte, et la définition de l'attribut style dessus ne répondra certainement pas à vos besoins.

    Si vous n'y croyez pas, vous pouvez aussi le vérifier : sans changer votre code html, remplacez DOMElement.nextSibling dans le script par DOMElement.nextSibling.nextSibling et cela fonctionnera normalement.

    répondre
    0
  • Annulerrépondre