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

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。

Answer 2

您编写此代码的方式将导致您的.addClass 语句立即执行。您需要将该语句包装在一个匿名函数中以延迟它直到元素被聚焦：

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

Answer 3

您可以这样做，将突出显示类添加到当前帮助字段并为前一个帮助字段删除它：

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

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