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?
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?
Respostas:
// 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)
$focused
, pois presumo que você faça isso para indicar que o var é um objeto jquery. TYVM.
$( 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 );
});
.each
não suportar)
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
}