How to make the 'focusout' event an input?

Question

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?

Answer 1

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

Answer 2

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/

Answer 3

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/

Answer 4

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.