Existem inúmeras categorias de eventos JavaScript, mas neste artigo, enfatizaremos o uso de eventos de foco JavaScript e desbotamento.
Javascript Focus e Blur Events
Quando os elementos HTML ganham foco ou perdem o foco, acontecem os eventos de foco JavaScript ou Blur, que fazem parte do objeto Focusevent.
Os eventos classificados na categoria de foco em JavaScript e eventos de Blur são demonstrados abaixo:
Cada um dos eventos acima mencionados é discutido abaixo.
Evento OnBlur
O evento OnBlur acontece quando o foco de um objeto é perdido. É usado principalmente dentro do código de validação de um formulário. Não borbulha e não pode ser cancelado. Ele suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do evento OnBlur é a seguinte.
Sintaxe HTML
Sintaxe JavaScript
objeto.onblur = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("Blur", Script);Exemplo
A função mudará as letras minúsculas para as letras maiúsculas.
Saída
Quando você sai do campo de entrada, o evento OnBlur ocorre e as letras de casos inferiores são deslocados para a carta do caso superior.
Evento Onfocus
O evento OnFocus acontece quando um elementos é focado. É usado principalmente com, e . Não borbulha e não pode ser cancelado. Ele suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do evento Onfocus é a seguinte.
Sintaxe HTML
Sintaxe JavaScript
objeto.onfocus = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("foco", script);Exemplo
Uma função altera a cor de fundo do campo de entrada quando está focado.
Saída
Quando você clica no campo de entrada, a cor de fundo do campo de entrada será alterada para azul. Já mostramos o estado antes e depois do campo de entrada abaixo.
Antes
Depois
Evento Onfocusin
O evento Onnfocusin é o mesmo que o evento OnFocus e acontece quando um elemento apenas obtém o foco, mas uma diferença sutil entre esses dois é que esse evento (onfocusin) bolhas e não pode ser cancelado. Ele suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do evento Onfocusin é a seguinte.
Sintaxe HTML
Sintaxe JavaScript
objeto.onfocusin = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("focusin", script);Exemplo
Clique no campo de entrada
Saída
Antes de clicar no campo de entrada.
Depois de clicar no campo de entrada, a cor de fundo do campo de entrada será alterada para rosa.
Evento OnFocusout
O evento Onnfocusout é o mesmo que o evento OnBlur e acontece quando um elemento perde o foco, no entanto, uma diferença sutil entre esses dois é que essas bolhas (no foco) e não podem ser canceladas. Ele suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
Sintaxe do evento OnFocusout é o seguinte.
Sintaxe HTML
Sintaxe JavaScript
objeto.onfocusout = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("FocusOut", Script);Exemplo
Deixe o campo de entrada para mudar as letras do caso inferior para o caso superior.
Saída
Quando você deixar o campo de entrada, as letras minúsculas serão transferidas para as letras maiúsculas.
Conclusão
Os eventos que ocorrem quando um elemento ganha ou perde seu foco são chamados de foco de javascript e eventos de desfoque. Eventos classificados na categoria de eventos JavaScript Focus e Blur são o Evento OnBlur, Evento Onfouc, Evento Onfocusin e Evento OnFocusout. Todos esses eventos são discutidos em detalhes, juntamente com o exemplo apropriado.