javascript - 当用户专注于文本输入时，我想在帮助部分中突出显示文本

我有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. [email protected])</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不起作用...

最佳答案

稍微修改了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. [email protected])</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。