addClass 函数工作正常，但删除类函数在表单的输入文本字段上不起作用?

Question

创建一个在线表单，我只希望用户关注的字段不褪色，所以我决定在我的表单中添加一些jQuery，但删除类功能不起作用。 addClass 在我单击一个字段时起作用，它会显示明亮且不会褪色，因为它添加了焦点类，但是一旦我单击离开或不再专注于该字段，焦点类仍然。

我看过一些类似的帖子，但其他帖子的解决方案似乎与我的问题无关。 以下是我的表格

<form name="contactform" method="post"> 
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>

下面是我的jQuery

$(document).ready(function(){
$('input[type="text"]').on('focus', function() {
$('.inputFaded').addClass('Focused');
});
$('input[type="text"]').off('focus', function() {
$('.inputFaded').removeClass('Focused');
});
});

任何帮助非常感谢！

谢谢

Answer 1

你误解了.off()

说明：删除事件处理程序。

因此，您似乎需要倾听focusin并focusout事件。

$(document).ready(function(){
$('input[type="text"]').focusin(function() {
$('.inputFaded').addClass('Focused');
});
$('input[type="text"]').focusout(function() {
$('.inputFaded').removeClass('Focused');
});
});

.Focused{
background-color: #FFFFCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="post"> 
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>

更新

$(document).ready(function(){
$('input[type="text"]').focusin(function() {
$(this).addClass('Focused');
});
$('input[type="text"]').focusout(function() {
$(this).removeClass('Focused');
});
});

.Focused{
border-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="post"> 
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>

Answer 2

.off函数不是用于运行函数，而是用于从与元素关联的事件中删除函数，正如@Phong已经指出的那样。请改用.focusout()函数或.on("focusout", ..)

请注意，如果这在 Vanilla JS 中也很简单：

// Vanilla JS solution
(function(){
let input = document.querySelector("input[type='text']"),
inputFaded = document.querySelector(".inputFaded");
input.addEventListener('focus', function() {
console.log("focused now!");
inputFaded.classList.add('Focused');
});
input.addEventListener('focusout', function(){
console.log("I will also be run! :)");
inputFaded.classList.remove('Focused');
})
})()

$(document).ready(function(){
$('input[type="text"]').on('focus', function() {
console.log("focused now!");
$('.inputFaded').addClass('Focused');
});
// Removing function from focus event that does not exist as a function to an eventlistener
$('input[type="text"]').off('focus', function() {
console.log("I will never be run? :(");
$('.inputFaded').removeClass('Focused');
});

// adding focusout eventlistener
$('input[type="text"]').on('focusout', function() {
console.log("I will be run! :)");
$('.inputFaded').removeClass('Focused');
});

// alternative way of adding focusout eventlistener
$('input[type="text"]').focusout( function() {
console.log("I will also be run! :)");
$('.inputFaded').removeClass('Focused');
});

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form name="contactform" method="post"> 
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>

Answer 3

你也可以这样尝试：

$(document).ready(function(){
$("input").focus(function(){
$('.inputFaded').addClass('Focused');
});
$("input").on('blur', function() {
$('div').removeClass('Focused');
});
});