jQuery blur(): Detectar perda de foco em elementos DOM

Revisão da função jQuery blur(), a sua funcionalidade é a detecção da perda do foco em diferentes elementos DOM de uma página web. O evento oposto é jQuery focus().

Outras funções de detecção são:

    • click() e dblclick()
    • keydown() e keyup()
    • mouseover() e mouseout()
    • li>mouseenter() e. ratoleave()

    Sintaxe de jQuery blur()

    Vejamos a sintaxe desta função jQuery extraída do seu site oficial:

    JavaScript

    .

>>

1
$(selector).borrão(função)

O evento borrão() é dado quando um elemento perde o foco que obteve ao ser clicado pelo rato ou alcançado por navegação tabular.

Esta funcionalidade pode ser interessante quando se trabalha com formulários com numerosos inputs e elementos com os quais o utilizador tem de trabalhar.

Explico os parâmetros:

  • selector (Necessário): Elemento que queremos controlar.
  • função (Opcional): Função de chamada de retorno a executar quando o elemento perde o foco.

Exemplo de jQuery blur()

Vejamos neste exemplo de blur() como detectar a perda de foco sobre um elemento:

JavaScript

>>

1
2
3
4
5
6
7
7
8
9
10

$(document).ready(function()

{
$(“#text1”).blur(function(){
$(this).css(“background-color”, “#FFFFFFCC”);
});
$(“#text2”).blur(function(){
$(this).hide(“slow”);
});
});

Explico o código acima:

  • No primeiro exemplo detectamos a perda de foco no elemento com id = ‘text1’. Subsequentemente, executamos a função jQuery css() e damos um fundo cinzento à entrada.
  • li>No segundo detectamos a perda de foco no elemento com id = ‘text2’. Subsequentemente, executamos a função jQuery hide() e fazemos desaparecer a entrada.

Exemplo código HTML

Eu mostro-lhe o código HTML das entradas do exemplo:

XHTML

>>>>div>>>

<input type=”text” value=”First textbox”>

<input type=”text” value=”Second textbox”>

1
2
3

.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *