jQuery: como encontrar os primeiros botões visíveis de entrada / seleção / textarea excluindo?

86

eu tentei

$(":input:not(input[type=button],input[type=submit],button):visible:first")

mas não encontra nada.

Qual é o meu erro?

UPD: eu executo isso em $ (document) .load ()

<script type="text/javascript">
$(window).load(function () {
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

e na depuração, posso ver que firstInput está vazio.

UPD2: estou na página ASP.NET em execução no Sharepoint.

Descobri até agora que para alguns elementos ele os encontra (para os fixos) e para outros não. :(

Artem
fonte
Tente "input" em vez de ": input"?
Alec
Deve funcionar bem. Seu problema está em outro lugar. Você não está executando este antes de o $(document)é ready()?
BalusC de
Você tem um html específico para pesquisar?
Shiki
Talvez a primeira entrada seja de type="hidden"? Clique com o botão direito na página e visualize o código-fonte. O HTML gerado também é importante. Sem ele e um SSCCE adequado , está atirando no escuro.
BalusC de

Respostas:

165

Por que não segmentar apenas aqueles que você deseja ( demonstração )?

$('form').find('input[type=text],textarea,select').filter(':visible:first');

Editar

Ou use jQuery : seletor de entrada para filtrar os descendentes do formulário.

$('form').find('*').filter(':input:visible:first');
Mottie
fonte
5
Caixa de seleção? Rádio? Senha? Sem mencionar a grande quantidade de novos tipos de entrada HTML5.
BalusC
9
@BalusC $ ('formulário'). Find (': entrada'). Filter (': visível: primeiro')
Abe Petrillo
1
Embora isso funcione até certo ponto, ele ignora o atributo tabindex.
ano
2
Pequeno detalhe, mas adição útil: em vez de ': visible: first', ': visible: enabled: first' será um filtro muito melhor porque o elemento superior pode ser desabilitado em alguns casos e o foco não pode mudar lá.
Prahlad Yeri
1
@PrahladYeri Talvez também exclua somente leitura':input:visible:enabled:not([readonly]):first'
JustinStolle
13

O código JQuery está bem. Você deve executar no manipulador de prontidão, não no evento de carregamento da janela.

<script type="text/javascript">
$(function(){
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

Atualizar

Tentei com o exemplo do Karim79 (obrigado pelo exemplo) e funciona bem: http://jsfiddle.net/2sMfU/

PeterFromCologne
fonte
3
Obrigado @BalusC. Eu vou atirar em mim agora. Eu me odeio. Eu poderia ter passado a última hora sem mexer no código em funcionamento. Eu poderia ter alimentado meus cachorros, limpo minha cozinha. Há muitas coisas que eu poderia ter alcançado. Agora tudo que tenho é dor. Adeus, para sempre ... E sim, eu deveria ter escutado.
karim79
@karim: rofl. De nada :) A propósito: Eu já dei banho em meus filhos, trouxe-os para a cama, alimentei cachorros e gatos e tomei uma coca-cola para mim;)
BalusC
7

Este é o meu resumo do que precede e funciona perfeitamente para mim. Obrigado pela informação!

<script language='javascript' type='text/javascript'>
    $(document).ready(function () {
        var firstInput = $('form').find('input[type=text],input[type=password],input[type=radio],input[type=checkbox],textarea,select').filter(':visible:first');
        if (firstInput != null) {
            firstInput.focus();
        }
    });
</script>
Ben Foster
fonte
3

Esta é uma melhoria em relação à resposta de @Mottie porque a partir do jQuery 1.5.2 :textseleciona inputelementos que não têm nenhum typeatributo especificado (neste caso type="text"está implícito):

$('form').find(':text,textarea,select').filter(':visible:first')
Mike Slinn
fonte
1

Aqui está minha solução. O código deve ser fácil de seguir, mas aqui está a ideia:

  • obter todas as entradas, seleções e áreas de texto
  • filtrar todos os botões e campos ocultos
  • filtrar apenas para campos visíveis e habilitados
  • selecione o primeiro
  • focar o campo selecionado

O código:

function focusFirst(parent) {
    $(parent).find('input, textarea, select')
        .not('input[type=hidden],input[type=button],input[type=submit],input[type=reset],input[type=image],button')
        .filter(':enabled:visible:first')
        .focus();
}

Em seguida, basta chamar focusFirst com seu elemento pai ou seletor.

Seletor:

focusFirst('form#aspnetForm');

Elemento:

var el = $('form#aspnetForm');
focusFirst(el);
J Adam Rogers
fonte
0

Você pode tentar o código abaixo ...

$(document).ready(function(){
    $('form').find('input[type=text],textarea,select').filter(':visible:first').focus();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
    
<input type="submit" />
</form>

Mahbub
fonte