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

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

稍微修改了您的 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，而是使用类来关联输入和消息字段。