搜索关于焦点和变化的输入

Question

我正在编写一个搜索表单，我喜欢类似于IOS上的搜索表单(即App )，用于聚焦输入字段。如果没有将文本插入到输入字段中，则返回到原来的状态。如果安装了文本，则文本仍处于紧张状态。

知道我怎么能做到这一点吗？非常感谢!

HTML

<i class="fa fa-search"></i> 
<input type="text" class="form-control-filter input-filter-sm" placeholder="Search">

CSS

.input-filter {
      width: calc (100% - 25px); 
      width: -webkit-calc(100% - 25px); 
      width: -moz-calc(100% - 25px); 
 }
.input-filter-sm {
      width: 75px; 
}

JQUERY

$( ".mobile-filter input" ).focusin(function(){
  $( ".mobile-filter input" ).addClass("input-filter");
  $( ".mobile-filter input" ).removeClass("input-filter-sm");
});

$( ".mobile-filter input" ).focusout(function(){
  $( ".mobile-filter input" ).removeClass("input-filter");
  $( ".mobile-filter input" ).addClass("input-filter-sm");
});

Answer 1

我在您的代码中更改了一些东西，我更改了选择器并将类添加到您的输入字段中。现在起作用了。

$( "input.mobile-filter" ).focus(function(){
  $( "input.mobile-filter" ).addClass("input-filter")
  $( "input.mobile-filter" ).removeClass("input-filter-sm")
});

$( "input.mobile-filter" ).blur(function(){
   var textLen = $(this).val().length;
  if(textLen === 0) {
    $( "input.mobile-filter" ).removeClass("input-filter")
    $( "input.mobile-filter" ).addClass("input-filter-sm")
  }
});

你的HTML

<i class="fa fa-search"></i> <input type="text" class="form-control-filter input-filter-sm mobile-filter" placeholder="Search">

演示小提琴

Answer 2

那这个呢？

HTML

    <i class="fa fa-search"></i> <input type="text" id="search" placeholder="Search">

Javascript =document.getElementById(‘搜索’)；

    inputSearch.onfocus = function() {
      inputSearch.style.width = '75px';
    }

    inputSearch.onblur = function() {
      if(!inputSearch.value) {
        inputSearch.style.width = '100%';
      }
    }

下面是jsfiddle：http://jsfiddle.net/nup177nd/10/