CODEWITHSUNDEEP
jquerycss
k4r1
k4r1

Reputation: 47

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!

Upvotes: 2

Views: 48

Answers (3)

Bagzli
Bagzli

Reputation: 6579

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" />

Upvotes: 1

David Hor&#225;k
David Hor&#225;k

Reputation: 5565

You can use jQuery's change

$(document).ready(function() {
  $("input[type='text']").change(function() {
    // If input is not empty
    if($(this).val()) {
       // Remove shadow
    } else {
       // Add shadow
    }
  });
});

Upvotes: 0

Dekel
Dekel

Reputation: 62636

I added the keyup event, note that I also checked inside the keyup if the value of the current input is not empty.

Here is a working version:

(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': '0 0 10px 2px #ff0000'
    });
  });
  $("input[type='text']").on('blur', function() {
    $('.wsite-search form').css({
      'boxShadow': ''
    });
  });
  $("input[type='text']").on('keyup', function() {
    if ($(this).val() != '') {
      $('.wsite-search form').css({
        'boxShadow': ''
      });
    } else {
         $('.wsite-search form').css({
          'boxShadow': '0 0 10px 2px #ff0000'
        });
     }
  });
});
.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>

Upvotes: 1

Related Questions