取消选择搜索框辉光效果作为用户类型

Question

我有一个带发光效果的搜索框。我只想让用户开始输入时发光效果消失。我怎样才能做到这一点？我在我的搜索框的CSS下面提供了我的jQuery脚本+部分内容。我认为修改必须来自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>

非常感谢你的帮助！

Answer 1

您可以使用jquery keydown：https://api.jquery.com/keydown/

以下是您提供的代码示例：

(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>

编辑：

这里还有一个带有输入和背景颜色的更简化的解决方案：

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

Answer 2

我添加了keyup事件，请注意，如果当前输入的值不为空，我也在keyup内部进行了检查。

这是一个工作版本：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用jQuery＆＃39; change

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