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

— xijo
fonte

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

33

Use "desfoque": http://docs.jquery.com/Events/blur#fn

— NVRAM
fonte

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