How to make the 'focusout' event an input?

Asked

Viewed 9,024 times

3

I want to make an input appear when I click on label, when I click out of the input, ie take the focus of such, I would like it to disappear.

HTML:

<form action="/" class="search">
    <fieldset>
        <label for="pesquisar">
            <span>Buscar</span>
        </label>
        <input type="text" name="pesquisar">
        <button type="submit" class="send-search"></button>
    </fieldset>
</form>

Javascript:

$(function() {
    var label = $('.search label'),
        input = $('.search label + input');

    label.on('click', function() {
        if (input.is(':focus')) {
            input.css('display', 'none');
        } else {
            input.css({
                'display': 'block'
            }).focus();
        }
    });

}(jQuery));

What I’m doing wrong?

4 answers

7


Hello,

HTML:

<form action="/" class="search">
<fieldset>
    <label for="pesquisar" id="meuLabel">
        <span>Buscar</span>
    </label>
    <input type="text" name="s" id="meuInput">
    <button type="submit" class="send-search">OK</button>
</fieldset>

Javascritpt:

$(function(){

var label = $('#meuLabel'),
    input = $('#meuInput');

input.hide();

label.on('click', function(){
    input.show();
});

input.on('focusout', function(){
    $(this).hide();
})

});

Look at the Fiddle

See the Fiddle with the answer

But you might consider using Angularjs would be much easier for you:

Google Angularjs

1

So that when you click on the label, go to the input, need to name the id, as the same as for, example:

<label for="pesquisar">
        Buscar
    </label>
    <input type="text" id="pesquisar">

Example: https://jsfiddle.net/tzavbfco/

In the matter of disappearing, you want the input to disappear as the user clicks off the input?

EDIT

To suit what you would like, you could do so:

$("#pesquisar").focusout(function(){
if($(this).val() == ""){
$(this).hide("slow", function(){
    $("label[for='pesquisar']").click(function(){
    $("#pesquisar").show("slow");
  })
});
}
})

See here: https://jsfiddle.net/tzavbfco/2/

  • I did it but it still doesn’t work :/

  • Take a look at Jsfiddle

  • Exactly! When the user clicks off the input, it disappears :D

  • The fetch is a kind of custom placeholder, you know?

  • I get it, so you want me to switch when you click on "Search" appear and when you click out disappear?

  • That’s it! Check the comments of the other reply, so that if possible you had a check for it to disappear only when it is empty.

  • @John Paul see if this is what you would like...

Show 2 more comments

1

You can do it this way...

<label for="pesquisar">Buscar</label>
<input type="text" id="pesquisar">

and javascript like this...

$(document).ready(function(){
    $('label').click(function(e) {
      e.stopPropagation();
      if (!$('#pesquisar').is(':visible')) {
        $('#pesquisar').fadeIn('fast');
      } 
    });
    $('html').click(function() {
      if ($('#pesquisar').is(':visible')) {
        $('#pesquisar').fadeOut('fast');
      } 
    });
    $('#pesquisar').click(function(e){
      e.stopPropagation();
    });
});

You can see the example here... https://jsfiddle.net/h2svjn5u/

0

Kind of?

var pesquisar = $("#pesquisar");
pesquisar.hide();
$("label[for='pesquisar']").click(function() {
  if (pesquisar.val().length <= 0) {
    pesquisar.toggle();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label for="pesquisar">Buscar</label>
<input type="text" id="pesquisar">

I believe that performing a toggle to show and hide the input by clicking search would be more feasible, why if you put the event to hide the input by clicking anywhere on the page it will often unnecessarily stop.

  • That’s it! But when the user clicks off the input, it disappears. If possible, make it disappear only when it’s empty, like if (!$('#pesquisar').val().length), understands?

Browser other questions tagged

You are not signed in. Login or sign up in order to post.