Como você define automaticamente o foco para uma caixa de texto quando uma página da web é carregada?

Respostas:

245

Se você estiver usando jquery:

$(function() {
  $("#Box1").focus();
});

ou protótipo:

Event.observe(window, 'load', function() {
  $("Box1").focus();
});

ou javascript simples:

window.onload = function() {
  document.getElementById("Box1").focus();
};

embora tenha em mente que isso substituirá outros em manipuladores de carga, consulte addLoadEvent () no google para encontrar uma maneira segura de anexar manipuladores de onload em vez de substituí-los.

Ben Scheirman
fonte
3
Por que não colocar manipuladores no elemento body? Alguma referência? Obrigado
Alexander Torstling
7
Porque é muito mais limpo separar o javascript do HTML. Você deve adicionar um comportamento de script a elementos visuais no seu HTML.
precisa saber é o seguinte
94

Em HTML, há um autofocusatributo para todos os campos do formulário. Há um bom tutorial sobre isso no Dive Into HTML 5 . Infelizmente, atualmente não é suportado pelas versões do IE com menos de 10.

Para usar o atributo HTML 5 e retornar a uma opção JS:

<input id="my-input" autofocus="autofocus" />
<script>
  if (!("autofocus" in document.createElement("input"))) {
    document.getElementById("my-input").focus();
  }
</script>

Não são necessários manipuladores jQuery, onload ou evento, porque o JS está abaixo do elemento HTML.

Editar: outra vantagem é que ele funciona com o JavaScript desativado em alguns navegadores e você pode removê-lo quando não deseja oferecer suporte a navegadores mais antigos.

Edit 2: Firefox 4 agora suporta o autofocusatributo, deixando o IE sem suporte.

dave1010
fonte
3
O que há com o autofocus="aufofocus"? Todos os links que você forneceu apenas dizer para adicionar o atributo: autofocus.
Gerrat 4/12/14
6
Nos dias de XHTML e HTML4, era comum fazer attribute="value"atributos booleanos. O HTML5 veio com a "sintaxe do atributo vazio" e eliminamos a redundância. Agora podemos fazer<input checked disabled autofocus data-something>
dave1010
Eu gosto dessa abordagem ... Esse código pertence à entrada ... livra-se da entrada e do boom, o código associado está aí ... Nós nos perdemos nos dias de hoje ... Passando um círculo completo agora tentando simplificar. ..
Serge
16

Você precisa usar o javascript:

<BODY onLoad="document.getElementById('myButton').focus();">

@ Ben observa que você não deve adicionar manipuladores de eventos como este. Embora essa seja outra pergunta, ele recomenda que você use esta função:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

Em seguida, faça uma chamada para addLoadEvent na sua página e faça referência a uma função que define o foco para a caixa de texto desejada.

Espo
fonte
14

Basta escrever o foco automático no campo de texto. Isso é simples e funciona assim:

 <input name="abc" autofocus></input>

Espero que isto ajude.

Arjun
fonte
1
isso é bom, mas o problema é que, se você tiver etapas com deslizamento estilo, que não seria útil esp se o tipo de entrada está no passo 3 ou passo 4 para ex
Kobe Bryan
12

Você pode fazer isso facilmente usando jquery desta maneira:

<script type="text/javascript">

    $(document).ready(function () {
        $("#myTextBoxId").focus();
    });

</script>

chamando esta função em $(document).ready().

Isso significa que essa função será executada quando o DOM estiver pronto.

Para mais informações sobre a função READY, consulte: http://api.jquery.com/ready/

Amir Chatrbahr
fonte
11

Usando plain vanilla html e javascript

<input type='text' id='txtMyInputBox' />


<script language='javascript' type='text/javascript'>
function SetFocus()
{
    // safety check, make sure its a post 1999 browser
    if (!document.getElementById)
    {
        return;
    }

    var txtMyInputBoxElement = document.getElementById("txtMyInputBox");

    if (txtMyInputBoxElement != null)
    {
        txtMyInputBoxElement.focus();
    }
}
SetFocus();
</script>

Para aqueles que usam o framework .net e asp.net 2.0 ou superior, é trivial. Se você estiver usando versões mais antigas da estrutura, precisará escrever algum javascript semelhante ao acima.

No seu manipulador OnLoad (geralmente page_load, se você estiver usando o modelo de página de estoque fornecido com o visual studio), você pode usar:

C #

protected void PageLoad(object sender, EventArgs e)
{
    Page.SetFocus(txtMyInputBox);
}

VB.NET

Protected Sub PageLoad(sender as Object, e as EventArgs)

    Page.SetFocus(txtMyInputBox)

End Sub

(* Nota: removi o caractere de sublinhado do nome da função que geralmente é Page_Load, pois em um bloco de código ele se recusou a renderizar corretamente! Não pude ver na documentação da marcação como obter os sublinhados para renderizar sem escape.)

Espero que isto ajude.

Jon
fonte
7

IMHO, a maneira 'mais limpa' de selecionar o primeiro campo de texto visível, ativado na página, é usar o jQuery e fazer algo assim:

$(document).ready(function() {
  $('input:text[value=""]:visible:enabled:first').focus();
});

Espero que ajude...

Obrigado...

reviver
fonte
6 
<html>  
<head>  
<script language="javascript" type="text/javascript">  
function SetFocus(InputID)  
{  
   document.getElementById(InputID).focus();  
}  
</script>  
</head>  
<body onload="SetFocus('Box2')">  
<input id="Box1" size="30" /><br/>  
<input id="Box2" size="30" />  
</body>  
</html>
Joel Coehoorn
fonte
5

Como conselho geral, eu recomendaria não roubar o foco da barra de endereço. ( Jeff já falou sobre isso. )

A página da Web pode levar algum tempo para carregar, o que significa que a alteração do foco pode ocorrer muito tempo após o usuário digitar o URL do pae. Então ele poderia ter mudado de idéia e voltar a digitar o URL enquanto você carrega sua página e rouba o foco para colocá-la em sua caixa de texto.

Essa é a única razão que me levou a remover o Google como minha página inicial.

Obviamente, se você controla a rede (rede local) ou se o foco é resolver um importante problema de usabilidade, esqueça tudo o que acabei de dizer :)

Vincent Robert
fonte
Eu concordo com você em alguns casos. No entanto, no meu caso específico, estou exibindo uma pequena div, com apenas uma caixa de entrada. O usuário deve digitar alguma coisa e fechar imediatamente a div, de modo que definir o foco seja útil.
Mark Biek
2

Eu tive um problema um pouco diferente. Eu queria autofocus, mas queria que o placeholdertexto permanecesse em vários navegadores. Alguns navegadores ocultam o placeholdertexto assim que o campo é focado, outros o mantêm. Eu tive que fazer com que os marcadores permanecessem no navegador, o que tem efeitos colaterais estranhos, ou pare de usar autofocus.

Por isso, ouvi a primeira chave digitada na tag body e redirecionei essa chave para o campo de entrada de destino. Todos os manipuladores de eventos envolvidos são mortos para manter as coisas limpas.

var urlInput = $('#Url');

function bodyFirstKey(ev) {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);

    if (ev.target == document.body) {
        urlInput.focus();
        if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
            urlInput.val(ev.key);
            return false;
        }
    }
};
function urlInputFirstFocus() {
    $('body').off('keydown', bodyFirstKey);
    urlInput.off('focus', urlInputFirstFocus);
};

$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);

https://jsfiddle.net/b9chris/qLrrb93w/

Chris Moschini
fonte
0

É possível definir autofocuselementos de entrada

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
oscar castellon
fonte
-1

Se você estiver usando o ASP.NET, poderá usar

yourControlName.Focus()

no código do servidor, que adicionará o JavaScript apropriado à página.

Outras estruturas do lado do servidor podem ter um método equivalente.

Andrew Morton
fonte
-3

Use o código abaixo. Para mim está funcionando

jQuery("[id$='hfSpecialty_ids']").focus()
srikanth
fonte