k4r1 k4r1 - 3 months ago 11
jQuery Question

Deselect Search Box Glow Effect As User Types

I have a search box with a glow effect. I just want the glow effect to disappear once the user starts typing. How can I do that? I have provided my jQuery script below + part of my search box's CSS. I think the modification though must be from jQuery.



(function($) {
$(function() {
$('#wsite-header-search-form .wsite-search-input').attr('placeholder', 'Search Store ...')
});
}(jQuery));

$(document).ready(function() {
$("input[type='text']").on('focus', function() {
$('.wsite-search form').css({
'boxShadow': '0px 0px 10px 2px #fafafa'
});
});
$("input[type='text']").on('blur', function() {
$('.wsite-search form').css({
'boxShadow': '0px 0px 0px 0px #fafafa'
});
});
});

.wsite-search form {
transition: 1s ease;
border-radius: 7px;
height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div class="wsite-search">
<form id="wsite-header-search-form">
<input type="text" class="wsite-search-input" />
</form>
</div>





Thanks a bunch for your help!

Answer

You can use jquery keydown: https://api.jquery.com/keydown/

Here is an example with code you provided:

(function($) {
  $(function() {
    $('#wsite-header-search-form  .wsite-search-input').attr('placeholder', 'Search Store ...')
  });
}(jQuery));

$(document).ready(function() {
  $("input[type='text']").on('focus', function() {
    $('.wsite-search form').css({
      'boxShadow': '0px 0px 10px 2px #fafafa'
    });
  });
  $("input[type='text']").keydown(function() {
    $('.wsite-search form').css({
      'boxShadow': '0px 0px 0px 0px #fafafa'
    });
  });
});
.wsite-search form {
  transition: 1s ease;
  border-radius: 7px;
  height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div class="wsite-search">
  <form id="wsite-header-search-form">
    <input type="text" class="wsite-search-input" />
  </form>
</div>

EDIT:

Here is also a lot more simplified solution with an input and background color:

https://jsfiddle.net/m3c9y9pu/

$(function() {
  $("input[type='text']").on('focus', function() {
    $(this).css('background', 'yellow')
  });

  $("input[type='text']").keypress(function() {
    $(this).css('background', 'red')
  });
 });

input{
    background: red;
}

<input type="text" class="wsite-search-input" />