jQuery perde evento de foco

253

Estou tentando mostrar um contêiner se um campo de entrada obtiver o foco e - esse é o problema real - ocultar o contêiner se o foco for perdido. Existe um evento oposto ao foco do jQuery?

Algum código de exemplo:

<input type="text" value="" name="filter" id="filter"/>

<div id="options">some cool options</div>

<script type="text/javascript">
  $('#options').hide();

  $('#filter').focus(function() {
    $('#options').appear();
  });
</script>

E o que eu gostaria de fazer é algo como isto:

$('#filter').focus_lost(function() {
  $('#options').hide();
});
javascript jquery javascript-events focus xijo
fonte

Respostas:

419

Use o evento de desfoque para chamar sua função quando o elemento perder o foco:

$('#filter').blur(function() {
  $('#options').hide();
});
Canavar
fonte
3
e se o navegador como o cromo auto preencher a caixa de texto, eu não acho que vai acionar a blur ()
pita
40

Como isso: 

$(selector).focusout(function () {
    //Your Code
});
SoftwareARM
fonte
10
qual é a diferença disso para blur?
Cregox 03/03
5
O método de desfoque é usado para remover o foco (ou seja, tornar não atualizado) o objeto ao qual ele pertence. Ao dar um campo de texto, o desfoque moverá o cursor para o próximo campo. Dando uma janela, o desfoque o moverá para trás de todas as outras. Esta não é uma palavra reservada, portanto você pode declarar sua própria variável ou função denominada blur, mas se o fizer, não poderá usar esse método para controlar qual objeto está atual.
SoftwareARM
2
O método de foco é usado para atribuir ao foco (ou seja, atualizar) o objeto ao qual ele pertence. Ao dar um campo de texto, o foco moverá o cursor para esse campo. Ao dar uma janela, o foco a moverá na frente de todas as outras. Ações que não especificam um objeto específico a ser aplicado para usar aquele que tem o foco. Esta não é uma palavra reservada, portanto, você pode declarar sua própria variável ou função chamada focus, mas se o fizer, não poderá usar esse método para controlar qual objeto está atual.
SoftwareARM
25
A explicação do SoftwareARM não fez muito sentido para mim na primeira leitura, então encontrei uma explicação alternativa na página de documentação do jQuery ( api.jquery.com/focusout ) que achei que seria útil para outras pessoas: O evento do focusout é enviado para um elemento quando ele, ou qualquer elemento dentro dele, perde o foco. Isso é diferente do evento de desfoque, pois suporta a detecção da perda de foco dos elementos pai (em outras palavras, ele suporta bolhas de evento).
18711 Brad
12

evento de desfoque: quando o elemento perde o foco.

evento focusout: quando o elemento, ou qualquer elemento dentro dele, perde o foco.

Como não há nada dentro do elemento do filtro, tanto o desfoque quanto o focoout funcionarão neste caso. 

$(function() {
  $('#filter').blur(function() {
    $('#options').hide();
  });
})

jsfiddle com blur: http://jsfiddle.net/yznhb8pc/

$(function() {
  $('#filter').focusout(function() {
    $('#options').hide();
  });
})

jsfiddle com focusout: http://jsfiddle.net/yznhb8pc/1/

Razan Paul
fonte
0

Se as 'Opções Frias' estiverem ocultas da visualização antes do foco do campo, convém criar isso no JQuery em vez de tê-lo no DOM, para que qualquer pessoa que use um leitor de tela não veja informações desnecessárias. Por que eles deveriam ouvi-lo quando não precisamos vê-lo?

Assim, você pode configurar variáveis ​​da seguinte forma:

var $coolOptions= $("<div id='options'></div>").text("Some cool options");

e depois acrescente (ou acrescente) ao foco

$("input[name='input_name']").focus(function() {
    $(this).append($coolOptions);
});

e remova quando o foco terminar

$("input[name='input_name']").focusout(function() {
    $('#options').remove();
});
Sprose
fonte