Como obter o elemento focado com jQuery?

Usando jQuery, como posso obter o elemento de entrada que tem o foco do cursor (cursor)?

Ou, em outras palavras, como determinar se uma entrada tem o foco do cursor?

// 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)

$( document.activeElement )

O recuperará sem precisar pesquisar a árvore DOM inteira, conforme recomendado na documentação do jQuery

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>

Tente o seguinte:

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

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
}

$(':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.

Tente isto ::

$(document).on("click",function(){
    alert(event.target);
    });

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

if ($('#inputId').is(':focus')) {
    //your code
}