Elementos de foco
Quais elementos podem ganhar foco? Por padrão, apenas elementos de formação podem obter foco. Porque apenas elementos de formação podem interagir
<input type = "text" value = "223">
Há também uma maneira de obter o foco de elementos não-formados. Primeiro defina tabIndex como -1 e depois chame focus() .
<div id = "test" style = "altura: 30px; largura: 100px; background: LightGreen"> div </div> <botão id = "btn"> elemento Div Gets Focus </botão> <cript> btn.onClick = function () {test.tabindex = -1; test.focus (); } test.onfocus = function () {this.style.background = 'Pink';} </sCript>ActiveElement
document.activeElement é usada para gerenciar o foco DOM e salva os elementos que atualmente obtêm o foco.
[Nota] Esta propriedade não é suportada pelo navegador do IE
<div id = "test" style = "altura: 30px; largura: 100px; fundo: luz de luz"> div </div> <botão id = "btn"> elemento de div obtém foco </botão> <cript> console.log (document.activeElement); test.focus (); console.log (document.activeElement); // <div>} </script>
Obtenha foco
Existem 4 maneiras de os elementos obter foco, incluindo carregamento de página, entrada do usuário (pressione a tecla TAB), o método focus() e a propriedade de autofocus
【1】 Carregamento da página
Por padrão, quando o documento é carregado, a referência ao elemento corporal é salva no document.activeElement . Durante o carregamento de documentos, o valor do document.activeElement é nulo
<SCRIPT> console.log (document.activeElement); // null </sCript> <body> <cript> console.log (document.activeElement); // <body> </cript> </body>
【2】 Entrada do usuário (pressione a tecla TAB)
Os usuários geralmente podem usar a tecla TAB para mover o foco e usar a barra de espaço para ativar o foco. Por exemplo, se o foco estiver em um link, pressione a barra de espaço neste momento e ele saltará para o link
Quando se trata de tecla de guia, não devemos mencionar tabindex . O atributo tabindex é usado para especificar se o nó do elemento HTML atual é percorrido pela tecla TAB e a prioridade da travessia
1. Se tabindex=-1 , a tecla de guia pula o elemento atual
2. Se tabindex=0 , significa que a tecla TAB atravessará o elemento atual. Se um elemento não definir tabindex , o valor padrão é 0
3. Se tabindex for maior que 0, significa que a tecla TAB será atravessada primeiro. Quanto maior o valor, menor a prioridade
No código a seguir, ao usar a tecla TAB, a ordem em que o botão recebe o foco é 2, 5, 1 e 3
<div id = "box"> <button tabindex = "3"> 1 </button> <botão tabindex = "1"> 2 </button> <button tabindex = "0"> 3 </button> <botão tabindex = "-1"> 4 </botão> 'Pink';} </sCript>
【3】 foco ()
focus() é usado para definir o foco do navegador no campo do formulário, ou seja, ativar o campo de formulário para que ele possa responder aos eventos do teclado.
[Nota] Como mencionado anteriormente, se não for um elemento de formulário, defina como tabIndex como -1, você também pode obter o foco
<span id = "test1" style = "altura: 30px; largura: 100px;"> span </span> <input id = "test2" value = "input"> <botão id = "btn1"> elemento de span recebe foco </button> <botão <butão = "btn2"> elemento de entrada obtém </toblow function () {test1.tabindex = -1; test1.focus ();} btn2.onClick = function () {test2.focus ();} </script>【4】 foco automático
Uma propriedade autofocus foi adicionado ao campo de formulário HTML5. Enquanto essa propriedade estiver definida, o foco pode ser movido automaticamente para o campo correspondente sem JavaScript.
[Nota] Este atributo só pode ser usado para elementos de formulário. Mesmo se o elemento normal estiver definido como tabIndex=”-1″ , não entrará em vigor.
<Input AutoFocus Value = "ABC">
hasfocus ()
document.hasFocus() retorna um valor booleano indicando se algum elemento no documento atual é ativado ou obtido foco. Ao verificar se o documento ganhou foco, você pode saber se está interagindo com a página.
console.log (document.hasfocus ()); // true // Clique em outras guias dentro de dois segundos para fazer com que o foco deixe a página atual setTimeout (function () {console.log (document.hasfocus ()); // false}, 2000);Perder o foco
Se você usa JavaScript para perder o foco, precisará usar blur()
O objetivo do método blur() é remover o foco do elemento. Ao chamar blur() , o foco não será transferido para um elemento específico; é apenas para remover o foco do elemento chamando o método
<input id = "test" type = "text" value = "123"> <button id = "btn1"> elemento de entrada Ganhos Focus </button> <botão id = "btn2"> elemento de entrada perde foco </button> <sCript> btn1.onClick = function () {Test.focus (); (} btn2.on;Eventos de foco
O evento de foco é acionado quando a página ganha ou perde o foco. Usando esses eventos e cooperando com document.hasFocus() Método e document.activeElement Property, você pode saber o paradeiro do usuário na página.
Os eventos de foco incluem os seguintes 4
1. Blur
O evento blur é disparado quando o elemento perde o foco. Este evento não borbulha
2. Foco
focus é demitido quando o elemento fica foco. Este evento não borbulha
3. Focus
focusin é demitido quando o elemento fica foco. Este evento é equivalente ao evento focus , mas borbulhando
4. Foco
focusour é demitido quando o elemento perde o foco. Este evento é equivalente ao evento Blur, mas borbulha
[Nota] Em relação aos eventos de foco e foco, exceto para o navegador do IE que suporta manipuladores de eventos de nível DOM0, outros navegadores suportam apenas os manipuladores de eventos de nível DOM2
<div id = "box" style = "display: block em linha; preenchimento: 25px; cor de fundo: luz; foco </button> <button id = "reset"> restauração </button> <cript> reset.onClick = function () {history.go ();} // focus () método btn1.onClick = function () {boxin.tabindex = -1; boxin.focus ();} // bluur () método btn2.onClick = function () {boxin.blur ();} // focusin event if (boxin.addeventListener) {boxin.adDeventListener ('focusin', hands)} mais {boxin.onfocusin = handler; = 'LightBlue';} if (box.addeventListener) {box.addeventListener ('focusin', manipulador)} else {box.onfocusin = handler;} // FunblblBlBlblur () {this.style.backColor = 'Orange';}} A partir dos resultados em execução, podemos ver que focusin pode borbulhar; enquanto o evento blur não pode borbulhar.
Os eventos de foco são frequentemente usados para exibição e verificação de formulário
Por exemplo, quando você obtiver o foco, modifique a cor do plano de fundo; Quando você perder o foco, restaure a cor do plano de fundo e verifique -a.
<div id = "box"> <input id = "input1" type = "text" placeholder = "digite apenas números"> <input id = "input2" type = "text" placeholder = "digite apenas caracteres chineses"> <span id = "tips"> </span> </divippt> if (box.addeventListener) box.addeventListener ('focusOut', fnout);} else {box.onfocusin = fnin; box.onfocusout = fnout;} função fnin (e) {e = e || evento; VAR Target = E.Target || E.Srcelement; Target.style.backgroundColor = 'Lightgreen';} função fnout (e) {e = e || evento; VAR Target = E.Target || E.Srcelement; Target.style.backgroundColor = 'Initial'; // Se for uma caixa de texto que verifique o número se (Target === input1) {if (!/^/D*$/. Test (Target.value.trim ())) {Target.focus (); tips.innerhtml = 'Digite apenas os números, reenture' setTimeout (function () {tips.innerhtml = ''}, 500); }} // Se for uma caixa de texto que verifica os caracteres chineses se (Target === input2) {if (!/^[/U4e00-/u9fa5]*$/. Test (Target.value.trim ())) {Target.focus (); tips.innerhtml = 'Digite apenas caracteres chineses, entre em volta' setTimeout (function () {tips.innerhtml = ''}, 500); }}}} </script>Resumir
O exposto acima é resumir todo o conteúdo do gerenciamento de foco em JavaScript para você. Este artigo é introduzido em detalhes e possui um certo valor de referência para seu estudo e trabalho. Se você tiver alguma dúvida, pode deixar uma mensagem para se comunicar.