如何在页面加载时对输入字段进行“聚焦”

Question

When i click on input then "focus" jquery is working fine, but when i load page then "email-field" has curser, my goal is that if input has curser on page load this should be foucus and also add 'class is-focused' , which is add on input click. 当我单击输入时，“ focus” jQuery工作正常，但是当我加载页面时，“ email-field”具有光标，我的目标是，如果输入在页面加载中具有光标，则应该是焦点，并且还要添加“ class is-聚焦”，即添加输入点击次数。 PLease help me. 请帮我。

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

You just need to add class in fieldset on page load. 您只需要在页面加载时在字段集中添加类。 you can do with one single line code. 您可以使用一个单行代码。

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

You can also refer jsfiddle url here 您也可以在此处引用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