如何在頁面加載時對輸入字段進行“聚焦”

Question

當我單擊輸入時，“ focus” jQuery工作正常，但是當我加載頁面時，“ email-field”具有光標，我的目標是，如果輸入在頁面加載中具有光標，則應該是焦點，並且還要添加“ class is-聚焦”，即添加輸入點擊次數。 請幫我。

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

如何在頁面加載時對輸入字段進行“聚焦”

問題描述

1 個解決方案

解決方案1
0 已采納 2019-03-06 06:05:41

如何在頁面加載時對輸入字段進行“聚焦”

問題描述

1 個解決方案

解決方案1 0 已采納 2019-03-06 06:05:41

解決方案1
0 已采納 2019-03-06 06:05:41