Question

当我单击输入时，“ focus” jquery工作正常，但是当我加载页面时，“ email-field”具有光标，我的目标是，如果输入在页面加载中具有光标，则应该是foucus并添加“ class is-focused”，即在输入点击时添加。请帮助我。

or if we can do this by add class on fieldset then anyone type any value in input.

// For input focused animation
$("input:text:visible:first").focus();
$(function() {
  $("input:text:visible:first").focus();
  // Trigger click event on click on input fields
  $("form input.form-control, form textarea.form-control").on("click, change, focus", function(e) {
    removeFocusClass();
    // Check if is-focused class is already there or not.
    if(!$(this).closest('form fieldset').hasClass('is-focused')) {
      $(this).closest('form fieldset').addClass('is-focused')
    }
  });
  // Remove the is-focused class if input does not have any value
  $('form input.form-control, form textarea.form-control').each(function() {
    var $input = $(this);
    var $parent = $input.closest('form fieldset');
    if ($input.val() && !$parent.hasClass('is-focused')) {
      $parent.addClass('is-focused')
    }
  });
  // Remove the is-focused class if input does not have any value when user clicks outside the form
  $(document).on("click", function(e) {
    if ($(e.target).is("form input.form-control, form textarea.form-control, form fieldset") === false) {
      removeFocusClass();
    }
  });
  function removeFocusClass() {
    $('form input.form-control, form textarea.form-control').each(function() {
      var $input = $(this);
      if (!$input.val()) {
        var $parent = $input.closest('form fieldset');
        $parent.removeClass('is-focused')
      }
    });
  }
});

fieldset.is-focused input {
  border:5px solid red;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<form class="user-login-form">
  <div class="form-head"><h2 >Sign in</h2>
  <div class="description-text" ><p class="small-text" data-drupal-selector="edit-line1">Not a member yet?</p>
  <a href="#" class="use-ajax small-text">Register now</a><p class="small-text" data-drupal-selector="edit-line2">&nbsp;and join the community</p>
  </div>
  </div>
  <fieldset class="js-form-item js-form-type-textfield form-type-textfield js-form-item-name form-item-name form-group col-auto">
  <input type="text" id="edit-name--MmB1Jbss54g" name="name" value="" size="60" maxlength="254" placeholder="Email address" class="form-text required form-control" required="required" aria-required="true" autofocus>
  <label  class="option js-form-required form-required">Email address</label>
  </fieldset>
  <fieldset class="js-form-item js-form-type-password form-type-password js-form-item-pass form-item-pass form-group col-auto">
  <input type="password" id="edit-pass--Db3_6vLkpJQ" name="pass" size="60" maxlength="128" placeholder="Password" class="form-text required form-control" required="required"><a href="#" data-show-password-trigger="" data-state="hidden" item-right="" class="password-link">Show</a>
  <label for="edit-pass--Db3_6vLkpJQ" class="option js-form-required form-required">Password</label>
  <small id="edit-pass--Db3_6vLkpJQ--description" class="description text-muted">
  <p class="small-text">Forgot your password?&nbsp;<a href="#" class="use-ajax small-text" data-dialog-type="modal">Click here</a></p></small>
  </fieldset>
</form>


</body>
</html>

Answer 1

您只需要在页面加载时在字段集中添加类。您可以只使用一个行代码。

$("input:text:visible:first").closest('form fieldset').addClass('is-focused');

您还可以引用jsfiddle网址here

如何使“焦点”集中在页面加载的输入字段上

1 个答案: