當用戶專注於文本輸入時，我希望在幫助部分中突出顯示文本

Question

我有2個div，第一個具有帶輸入字段的表單，第二個只是密碼強度等的幫助部分。 這是我的表格：

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>"  method="post" class="form-signin" id="reg_form" role="form" name="registration_form">
    Registration Key:<input class="form-control" type='text' name='reg_key' id='reg_key' required /><span id="loadergif"></span><br>
    Username:<input class="form-control" type='text' name='username' id='username' /><br>
    Email: <input class="form-control" type="email" name="email" id="email" /><br>
    Password:<input data-toggle="tooltip" data-placement="right" data-trigger="click" class="form-control input-group" type="password" name="password" id="password"/><br>
    Confirm password: <input class="form-control" type="password" name="confirmpwd" id="confirmpwd" /><br>
    <input type="button" value="Register" class="btn btn-success" onclick="return regformhash(this.form,this.form.username,this.form.email,this.form.password,this.form.confirmpwd);" /> <br>
    <p>Already registered? <a href="signin.php">Sign In</a></p>
</form>

和幫助部分：

<ul class="list-group">
    <li class="list-group-item" id="reg">Registration key can be found in the email that we sent you.</li>
    <li class="list-group-item" id="user">Usernames may contain only digits, upper and lower case letters and underscores</li>
        <li class="list-group-item" id="emailli">Emails must have a valid email format (e.g. test@test.com)</li>
    <li class="list-group-item" id="passfield">Passwords must be at least 6 characters long</li>
    <li class="list-group-item" id="passfield1">Passwords must contain:
        <ul>
            <li class="list-group-item" id="passfield2">At least one upper case letter (A..Z)</li>
            <li class="list-group-item" id="passfield3">At least one lower case letter (a..z)</li>
            <li class="list-group-item" id="passfield4">At least one number (0..9)</li>
        </ul>
    </li>
    <li class="list-group-item" id="confirmpass">Your password and confirmation must match exactly</li>
</ul>

我試圖使用$('#reg_key').focus($('#reg').addClass('highlight')); ，但無論如何，它只是突出顯示每個字段。 我希望它可以聚焦，然后當用戶聚焦於下一個字段並從上一個字段中刪除突出顯示時轉到下一個。

更新：

這是我申請的：

$('#reg_key').focus(function(){
$('#reg').addClass('highlight');
});

$('#username').focus(function(){
$('#user').addClass('highlight');
$('#reg').removeClass('highlight');
});

$('#email').focus(function(){
$('#emailli').addClass('highlight');
$('#user').removeClass('highlight');
});

$('#password').focus(function(){
$('#passfield').addClass('highlight');
$('#passfield1').addClass('highlight');
$('#passfield2').addClass('highlight');
$('#passfield3').addClass('highlight');
$('#passfield4').addClass('highlight');
$('#emailli').removeClass('highlight');
});

$('#confirmpwd').focus(function(){
$('#confirmpass').addClass('highlight');
$('#passfield').removeClass('highlight');
$('#passfield1').removeClass('highlight');
$('#passfield2').removeClass('highlight');
$('#passfield3').removeClass('highlight');
$('#passfield4').removeClass('highlight');
});

但是#password和#confimpwd不起作用...

Answer 1

您編碼的方式將導致您的.addClass語句立即執行。 您需要將該語句包裝在匿名函數中，以將其延遲到元素被關注之前：

$('#reg_key').focus(function(){
   $('#reg').addClass('highlight')
});

Answer 2

您可以執行以下操作，將突出顯示類添加到當前幫助字段，並在上一個幫助字段中將其刪除：

$('#currentinputelementID').focus(function(){
   $('#currenthelpfieldID').addClass('highlight');
   $('#previoushelpfieldID').removeClass('highlight');
});

Answer 3

稍微修改了HTML。 看看是否適合您： http : //jsfiddle.net/lotusgodkk/GCu2D/91/

JS：

 $(document).on('focus','form input',function(){
    $('.highlight').removeClass('highlight');
    var id = $(this).attr('id');
    $('.list-group li.'+id).addClass('highlight');        
});

HTML：

<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" class="form-signin" id="reg_form" role="form" name="registration_form">Registration Key:
  <input class="form-control" type='text' name='reg_key' id='reg_key' required="true" /><span id="loadergif"></span>
  <br>Username:
  <input class="form-control" type='text' name='username' id='username' />
  <br>Email:
  <input class="form-control" type="email" name="email" id="email" />
  <br>Password:
  <input data-toggle="tooltip" data-placement="right" data-trigger="click" class="form-control input-group" type="password" name="password" id="password" />
  <br>Confirm password:
  <input class="form-control" type="password" name="confirmpwd" id="confirmpwd" />
  <br>
  <input type="button" value="Register" class="btn btn-success" onclick="return regformhash(this.form,this.form.username,this.form.email,this.form.password,this.form.confirmpwd);" />
  <br>
  <p>Already registered? <a href="signin.php">Sign In</a>
  </p>
</form>
<ul class="list-group">
  <li class="list-group-item reg_key">Registration key can be found in the email that we sent you.</li>
  <li class="list-group-item username">Usernames may contain only digits, upper and lower case letters and underscores</li>
  <li class="list-group-item email">Emails must have a valid email format (e.g. test@test.com)</li>
  <li class="list-group-item password">Passwords must be at least 6 characters long</li>
  <li class="list-group-item confirmpwd">Passwords must contain:
<ul>
        <li class="list-group-item passfield2">At least one upper case letter (A..Z)</li>
        <li class="list-group-item passfield3">At least one lower case letter (a..z)</li>
        <li class="list-group-item passfield4">At least one number (0..9)</li>
    </ul>
</li>
<li class="list-group-item confirmpass">Your password and confirmation must match exactly</li>
</ul>

使用類將輸入和消息字段相關聯，而不是使用Id。

Answer 4

我使用:focus偽選擇器創建了一個替代解決方案，這是演示： http : //jsfiddle.net/sandro_paganotti/Qxxtb/

HTML

<form>
    <input type="text" id="name" placeholder="name"/><br/>
    <input type="password" id="password"/>
    <div>
        <p data-for="name">this is the help for name</p>
        <p data-for="password">this is the help for password</p>
    </div>    
</form>

CSS

#name:focus ~ div > p[data-for="name"],
#password:focus ~ div > p[data-for="password"]{
    background-color: yellow;
}