JQuery по функции фокуса

Question

Когда фокусируется input, я хочу, чтобы его color и border-bottom стали синими, но мой скрипт не работает

function dedaberi() {
  $('#addplanpopup .paperName').css({
    'borderBottom': '2px solid rgb(41, 134, 255)'
  });
  $('.floating-label').css({
    'color': 'rgba(41, 134, 255, 0.750)'
  });
}

if ($('#addplanpopup input').focusin()) {
  dedaberi();
} else {
  $('#addplanpopup .paperName').css({
    'borderBottom': '2px solid black'
  });
  $('.floating-label').css({
    'color': 'black'
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addplanpopup">
  <input type="text" class="paperName" required/>
  <span class="floating-label">Your plan's head !</span>
</div>

Answer 1

Вы можете использовать focus и blur. Я думаю, что вы пытаетесь не возможно. if($('#addplanpopup input').focusin()) не так, как работает событие. Событие должно быть зарегистрировано, затем оно слушает то, что должно.

function dedaberi() {
  $('#addplanpopup .paperName').css({
    'borderBottom': '2px solid rgb(41, 134, 255)'
  });
  $('.floating-label').css({
    'color': 'rgba(41, 134, 255, 0.750)'
  });
}

$('#addplanpopup input').focus(function() {
  dedaberi();
})

$('#addplanpopup input').blur(function() {
  $('#addplanpopup .paperName').css({
    'borderBottom': '2px solid black'
  });
  $('.floating-label').css({
    'color': 'black'
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addplanpopup">
  <input type="text" class="paperName" required/>
  <span class="floating-label">Your plan's head !</span>
</div>