Hover textbox remains fixed when selected

Question

I\'ve created a search bar when, a user hover overs a button a textbox will appear. What i want to do is keep the text box to stay visible once the user has pressed the text box

Answer 1

Try adding this new CSS style to keep the box visible when it has focus:

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

Functional example:

#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

Just add a check to see if the textbox has focus:

$('#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

I think this should do roughly what you are looking for. I decided to use the blur event, rather than the hover event, meaning that the textbox won't disappear until the user clicks elsewhere and they don't have to click on it to start typing.

There's also an animation for the input.

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>