Hover textbox remains fixed when selected

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. So if the user accidentally removes the mouse over the text box or button whilst typing the text box remains in the same place.

Here's my code:

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

I've done it this way to add transition effects on to the search-text. I was thinking of adding a class on the textbox using javascript, but unsure if this way would work. Also i notice the text box changes position if you type in it with out hovering over the section.

Answers:

Answer

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

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

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.