Javascript 当用户关注文本输入时，我希望在我的帮助部分有文本高亮显示

我有两个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>

---

但是密码和confimpwd不起作用…

您对其进行编码的方式将导致.addClass语句立即执行。您需要将该语句包装在匿名函数中，以将其延迟到元素被聚焦：

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

---

您可以这样做，将highlight类添加到当前帮助字段，并将其删除到上一个帮助字段：

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

---

稍微修改一下你的HTML。看看这是否适合您：

JS:

HTML:

---

使用类来关联输入和消息字段，而不是使用Id。

我使用：focus伪选择器创建了一个替代解决方案，演示如下：

HTML

---

您可能还想在blur上取消高亮显示它，并调用类似的blur和removeClass。很高兴它对您有用。只是问一下，为什么在链接的表单输入中没有统一的边？我说的是边界半径？为什么ul会更高？我不确定。我仍在开发该网站等。这是一个奇怪的问题…ul更高，因为您在左分区中为表单指定了填充。如果您需要统一的级别，则为右分区指定相同的填充。您可以使用表单输入{border radius:4px；}或更好地为您想要圆角的所有输入指定一个公共类，而不是指定单独的边界半径。

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

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

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

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

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

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