Question

我在搜索表单上工作，我喜欢像IOS（即App Store）上的搜索表单一样工作在焦点上，输入字段伸展。如果没有文本插入输入字段，则返回其原始状态。如果文字被插入，它仍处于拉伸状态。

知道如何实现这一目标吗？非常感谢你！

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

Answer 2

这个怎么样？

HTML

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

的Javascript var inputSearch = document.getElementById（'search'）;

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

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

这是jsfiddle：http://jsfiddle.net/nup177nd/10/

搜索焦点和更改输入

2 个答案: