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

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
}

  
  SEARCH