Respostas:
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.
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.
autofocus="aufofocus"? Todos os links que você forneceu apenas dizer para adicionar o atributo: autofocus.
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>
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.
Basta escrever o foco automático no campo de texto. Isso é simples e funciona assim:
<input name="abc" autofocus></input>Espero que isto ajude.
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/
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.
<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> 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 :)
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);É possível definir autofocuselementos de entrada
<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">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.