Como obter o elemento focado com jQuery?


Respostas:


740
// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

Qual deles você deve usar? citando os documentos do jQuery :

Como em outros seletores de pseudo-classe (aqueles que começam com um ":"), recomenda-se preceder: foco com um nome de tag ou outro seletor; caso contrário, o seletor universal ("*") está implícito. Em outras palavras, o vazio $(':focus')é equivalente a $('*:focus'). Se você estiver procurando pelo elemento atualmente focado, $ (document.activeElement) o recuperará sem precisar pesquisar a árvore DOM inteira.

A resposta é:

document.activeElement

E se você quiser um objeto jQuery envolvendo o elemento:

$(document.activeElement)

2
mas espere, como obtenho o elemento que possui o sinal de intercalação?
dave

@dave. O que você quer dizer com "tem o sinal de intercalação" ? focado? o mouse está nele?
gdoron está apoiando Monica

Bem, aqui está a minha situação: quando clico em um elemento específico, quero colocar um caractere no último elemento de texto de entrada focado. Basicamente, o elemento que tinha o foco último ou à direita antes de clicar nesse elemento específico.
dave

11
@dave. Isso não pode ser feito. Acho que apenas o IE tem esse recurso, mas agora você está fazendo uma pergunta diferente, deve fazê-lo em uma nova pergunta.
gdoron está apoiando Monica

3
Eu gosto de como você usou o nome da variável $ prefixada $focused, pois presumo que você faça isso para indicar que o var é um objeto jquery. TYVM.
Valamas


6

Eu testei duas maneiras no Firefox, Chrome, IE9 e Safari.

(1) $(document.activeElement)funciona como esperado no Firefox, Chrome e Safari.

(2) $(':focus')funciona como esperado no Firefox e Safari.

Eu mudei para o mouse para inserir 'nome' e pressionei Enter no teclado, depois tentei obter o elemento focado.

(1) $(document.activeElement)retorna a entrada: texto: nome como esperado no Firefox, Chrome e Safari, mas retorna entrada: submit: addPassword no IE9

(2) $(':focus')retorna input: text: name como esperado no Firefox e Safari, mas nada no IE

<form action="">
    <div id="block-1" class="border">
        <h4>block-1</h4>
        <input type="text" value="enter name here" name="name"/>            
        <input type="button" value="Add name" name="addName"/>
    </div>
    <div id="block-2" class="border">
        <h4>block-2</h4>
        <input type="text" value="enter password here" name="password"/>            
        <input type="submit" value="Add password" name="addPassword"/>
    </div>
</form>

5

Tente o seguinte:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});

Sim, é por isso que esse loop terá apenas uma iteração. alerta é apenas para demonstrar o exemplo. Se você possui essa variável, pode tudo com o elemento que deseja.
Adil Malik

Como é possível focar mais de um elemento?
Andreas Furster 15/09/14

@AndreasFurster, você está certo. Sempre haverá apenas uma iteração nesse loop. Essa pode não ser a melhor maneira de atingir a meta, mas funciona.
Adil Malik

Veja a resposta aceita para saber por que essa é a pior / menos eficiente maneira de fazê-lo. (desnecessário .eachnão suportar)
Brad Kent

2

Como é que ninguém mencionou ..

document.activeElement.id

Estou usando o IE8 e não o testei em nenhum outro navegador. No meu caso, estou usando-o para garantir que um campo tenha no mínimo 4 caracteres e seja focado antes de agir. Depois de inserir o quarto número, ele é acionado. O campo tem um ID de 'ano'. Estou usando..

if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
    // action here
}

1

$(':focus')[0] fornecerá o elemento real.

$(':focus') fornecerá uma variedade de elementos, geralmente apenas um elemento é focado por vez; portanto, isso só será melhor se você, de alguma forma, tiver vários elementos focados.



0

Se você deseja confirmar se o foco está em um elemento, então

if ($('#inputId').is(':focus')) {
    //your code
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.