Функция addClass работает правильно, но функция removeClass не работает в поле ввода текста для формы?

Question

Создание онлайн-формы, и я бы хотел, чтобы только поле, на котором сфокусирован пользователь, не было закрашено, поэтому я решил добавить jQuery в мою форму, но функция удаления класса не работает. addClass работает, когда я щелкаю в поле, оно отображается ярко и не блекло, поскольку оно добавляет класс Focused, но как только я щелкаю или больше не фокусируюсь на этом поле, класс Focused остается.

Я видел несколько похожих постов, но решения других постов, похоже, не относятся к моей проблеме. Ниже моя форма

<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');
  });

});