javascript - 在焦点和更改上搜索输入

Question

我正在研究一个搜索表单，我喜欢它像 IOS 上的搜索表单一样工作(即 App Store) 在焦点输入字段延伸。 如果没有文本被插入到输入字段中，它返回到它的原始状态。 如果插入文本，它会保持拉伸(stretch)状态。

知道如何实现吗？非常感谢!

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

DEMO FIDDLE