Question

我创建了一个搜索栏，当用户将鼠标悬停在按钮上时，会出现一个文本框。我想要做的是保持文本框保持可见一旦用户按下文本框。因此，如果用户意外地将鼠标移到文本框或按钮上，同时键入文本框仍保留在同一位置。

这是我的代码：

$('#search-button, #search-text').hover(function searchbox () {
        $('#search-text').addClass("fixed-textbox");
    },function () {
        $('#search-text').removeClass("fixed-textbox");
    });

#search-text {
  left:300px;
  position:relative;
}
.search:hover #search-text {
  left:0;
  position:relative;
}
.search {
  background: gray;
  display: inline-block;
  padding: 10px;
  overflow:hidden
}

<div class="search">
  <input id="search-text" type="text" placeholder="type here" />
  <button id="search-button">SEARCH</button>
</div>

我这样做是为了在搜索文本中添加过渡效果。我正在考虑使用javascript在文本框中添加一个类，但不确定这种方式是否有效。此外，我注意到如果您在文本框中输入而不是将鼠标悬停在该部分上，则文本框会更改位置。

Answer 1

尝试添加这种新的CSS样式，以便在焦点有效时保持框可见：

#search-text:focus {
  left: 0px;    
}

功能范例：

#search-text {
  left:300px;
  position:relative;
}
#search-text:focus {
  left: 0px;    
}
.search:hover #search-text {
  left:0;
  position:relative;
}
.search {
  background: gray;
  display: inline-block;
  padding: 10px;
  overflow:hidden
}

<div class="search">
  <input id="search-text" type="text" placeholder="type here" />
  <button id="search-button">SEARCH</button>
</div>

Answer 2

只需添加一项检查以查看文本框是否具有焦点：

$('#search-button, #search-text').hover(function searchbox () {
    $('#search-text').addClass("fixed-textbox");
},function () {
    if(!$("#search-text").is(":focus")){
        $('#search-text').removeClass("fixed-textbox");
    }
});

//hide if focus out
$("#search-text").on("focusout", function(){
    //Only if textbox does not have a value
    if($("#search-text").val() == null || $("#search-text").val() == ""){
        $('#search-text').removeClass("fixed-textbox");
    }
});

Answer 3

我认为这应该大致符合您的要求。我决定使用模糊事件，而不是悬停事件，这意味着文本框不会消失，直到用户点击其他地方，他们不必点击它开始输入。

还有一个输入动画。

var VISIBLE_CLASS = 'fixed-textbox';

$(function() {

  var $text = $('#search-text'),
      $button = $('#search-button');

  function toggle(bool) {
    return function() {
      if(bool) {
        $text.addClass(VISIBLE_CLASS);
        $text.focus();
      } else {
        $text.removeClass(VISIBLE_CLASS);
      }
    }
  }

  $button.on('click', toggle(true));
  $button.on('hover', toggle(true));
  $text.on('blur', toggle(false));
});

#search-button {
  /* show above during animation */
  z-index:10;
  position:relative;
}

#search-text {
  left:300px;
  position:relative;
  -webkit-transition-duration:0.3s;
}

#search-text.fixed-textbox {
  left:0px;
  -webkit-transition-duration:0.3s;
}

.search {
  background: gray;
  display: inline-block;
  padding: 10px;
  overflow:hidden
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <input id="search-text" type="text" placeholder="type here"/>
  <button id="search-button">SEARCH</button>
</div>

选中时，悬停文本框保持固定

3 个答案: