1

私はこのリンクをパスワードの一致検証に使用しています。すべてが非常にうまく機能しています。しかし、問題は、パスワードの確認フィールドの横ではなく、フィールドの上にメッセージが表示されることです。ここで私が試したこと。

JavaScript 関数

function checkPass(){
    var password = document.getElementById('password');
    var password2 = document.getElementById('password2');             
    var message = document.getElementById('confirmMessage');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
                  
    if(password.value == password2.value){
        password2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = 'Passwords Match!'            
    }else{
        //The passwords do not match.
        //Set the color to the bad color and
        //notify the user.
        password2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = 'Passwords Do Not Match!'
    }
}

HTML

<div id="wrapper">
    <form name="form" id="form" class="form" onsubmit="someFunction(this);return false">
        <label for="password">Password:</label><input type="password" style="color: #B8B894;" value="Password" onblur="if(this.value == '') { this.value='Password'}" onfocus="if (this.value == 'Password') {this.value=''}" name="password" id="password" />
        <label for="password2">Confirm Pass:</label><input type="password" name="password2" id="password2" onkeyup="checkPass(); return false;" />
        <span id="confirmMessage" class="confirmMessage"></span><br/>
        <input type="submit" value="Submit" class="submit" />
        <input type="button" name="reset_form" value="Reset All Fields " onclick="this.form.reset();">
    </form>
</div>

CSS

<style type="text/css">
  #wrapper {width:75%; margin:70px auto}
  .form {float:left; padding:0 139px 10px 10px; background:#f3f3f3; border:2px solid #cfcfcf width: 100%;}
  .form label {float:left; width:100px; padding:10px 10px 0 0; font-weight:bold font:12px Verdana, Arial, Helvetica, sans-serif; color:#666}
  .form select {float:left; width:146px; margin-top:10px}
  .form input {float:left; margin-top:10px}
  .form .submit {clear:both}
  .form #confirmMessage {font-size: 0.9em; margin:5px; padding:10px 10px;}
  .form input.password {font:normal normal normal 1em verdana,arial,sans-serif; padding:4px 6px 3px 6px; border:1px solid #ccc; border-top-color:#aaa; border-bottom-color:#ddd; cursor:text; width:286px; -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);}
  #msg {display:none; position:absolute; z-index:200; background:url(images/msg_arrow.gif) left center no-repeat; padding-left:7px}
  #msgcontent {display:block; background:#f3e6e6; border:3px solid #924949; border-left:none; padding:5px; min-width:150px; max-width:250px}
</style>

結果は以下の画像のようにレンダリングされます。 画像

これはどのように解決できますか？

編集: CSS で #wrapper を質問に入れるのを忘れています。私は今私の質問に追加しました。

編集＃2：<style>タグの間にすべてを入れました。親切に助けてください。

4

1 に答える 1

2

あなたは今すべてを左に浮かせているので、スパンはそれがどこに行くべきかわかりません。
コードを取得したと言ったページのコードを使用した場合、これは発生しませんでした。

とにかく、私はあなたがあなたのcssで持っていたいくつかのフロートといくつかのエラーを取り除きました、そしてそれは今このように見えます。

 #wrapper {width:75%; margin:70px auto}
 .form {padding:0 10px 10px 10px; background:#f3f3f3; border:2px solid #cfcfcf;}
 .form label {display:inline-block; width:100px; margin:10px 0;
    font:bold 12px Verdana, Arial, Helvetica, sans-serif; color:#666}
 .form select {float:left; width:146px; margin-top:10px}
 .form .submit {clear:both}
 .form #confirmMessage {font-size: 0.9em;}

<br>また、最初の後にを追加しましたinput。そして、結果はこのjsFiddleのようになります。

于 2012-04-22T07:20:57.457 に答える