javascript - 如何在页面加载时“关注”输入字段
问题描述
当我单击输入时,“焦点”jquery 工作正常,但是当我加载页面时,“电子邮件字段”有光标,我的目标是,如果输入在页面加载时有光标,这应该是重点并添加“类是 - focus' ,在输入点击时添加。请帮我。
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"> 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? <a href="#" class="use-ajax small-text" data-dialog-type="modal">Click here</a></p></small>
</fieldset>
</form>
</body>
</html>
解决方案
您只需要在页面加载时在字段集中添加类。你可以用一个单行代码来做。
$("input:text:visible:first").closest('form fieldset').addClass('is-focused');
推荐阅读
- javafx - 带有 javafx 13 的非模块化 java:install4j VM 参数
- javascript - 正则表达式排除带有奇怪 URL 的链接
- java - 如何显示用于静音原生广告的谷歌表单?
- r - 在R中将2行矩阵变成一行和一列
- string - DejaVu:free():下一个尺寸无效(正常)
- css - bootswatch 中的 CSS 样式不适用于 Shiny R
- mongodb - 这个奇怪的 BSON 日期保存是怎么回事?
- android - 为什么使用接口适配器 Activity 时出现 ClassException?
- environment-variables - 如何在 GitLab Omnibus 配置中使用环境变量
- vb.net - 在表单关闭时关闭特定应用程序