CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jsg
jsg

Reputation: 1264

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.

Upvotes: 1

Views: 1364

Answers (3)

Dan Prince
Dan Prince

Reputation: 29999

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>

Upvotes: 2

JRulle
JRulle

Reputation: 7568

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>

Upvotes: 7

Dhunt
Dhunt

Reputation: 1594

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");
    }
});

Upvotes: 4

Related Questions