blocks|key|1557411|text|如果您使用的是jquery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1557412|$(function()+{
++$("#Box1").focus();
});|code-block|syntax|javascript|1557413|或者原型：|1557414|Event.observe(window,+'load',+function()+{
++$("Box1").focus();
});|1557415|或者普通的javascript：|1557416|window.onload+=+function()+{
++document.getElementById("Box1").focus();
};|1557417|但请记住，这将替换其他的加载处理程序，所以在谷歌中查找addLoadEvent()，以获得附加加载处理程序而不是替换处理程序的安全方法。|1557418|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

If you're using jquery:

<pre><code>$(function() {
 $("#Box1").focus();
});
</code></pre>

or prototype:

<pre><code>Event.observe(window, 'load', function() {
 $("Box1").focus();
});
</code></pre>

or plain javascript:

<pre><code>window.onload = function() {
 document.getElementById("Box1").focus();
};
</code></pre>

though keep in mind that this will replace other on load handlers, so look up addLoadEvent() in google for a safe way to append onload handlers rather than replacing.

blocks|key|1557565|text|在HTML语言中，所有表单域都有一个autofocus+attribute。在Dive+Into+HTML+5中有关于它的很好的教程。不幸的是，低于10的IE版本目前还不支持supported。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1557566|要使用HTML+5属性并返回到JS选项，请执行以下操作：|1557567|<input+id="my-input"+autofocus="autofocus"+/>
<script>
++if+(!("autofocus"+in+document.createElement("input")))+{
++++document.getElementById("my-input").focus();
++}
</script>|code-block|syntax|javascript|1557568|不需要jQuery、onload或事件处理程序，因为JS位于HTML元素之下。|1557569|编辑:另一个优点是，它可以在某些浏览器中关闭JavaScript，当您不想支持较旧的浏览器时，可以删除JavaScript。|1557570|编辑2:+Firefox4现在支持autofocus属性，只是不支持IE。|1557571|entityMap|0|LINK|mutability|MUTABLE|url|http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#autofocusing-a-form-control|1|http://diveintohtml5.info/forms.html#autofocus|2|http://www.wufoo.com/html5/attributes/02-autofocus.html^0|I|9|I|J|0|13|G|1|2F|9|2|0|0|0|0|0|H|9|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@$9|17|A|18|1|19]|$9|1A|A|1B|1|1C]|$9|1D|A|1E|1|1F]]|E|$]]|$1|F|3|G|5|6|7|1G|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1I|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1J|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]|12|$5|V|W|X|E|$Y|13]]]]

In HTML there's an <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#autofocusing-a-form-control" rel="noreferrer"><code>autofocus</code> attribute</a> to all form fields. There's a good tutorial on it in <a href="http://diveintohtml5.info/forms.html#autofocus" rel="noreferrer">Dive Into HTML 5</a>. Unfortunately it's currently not <a href="http://www.wufoo.com/html5/attributes/02-autofocus.html" rel="noreferrer">supported</a> by IE versions less than 10.

To use the HTML 5 attribute and fall back to a JS option:

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

No jQuery, onload or event handlers are required, because the JS is below the HTML element.

Edit: another advantage is that it works with JavaScript off in some browsers and you can remove the JavaScript when you don't want to support older browsers.

Edit 2: Firefox 4 now supports the <code>autofocus</code> attribute, just leaving IE without support.

blocks|key|1773079|text|只需在文本字段中编写自动聚焦。这很简单，它是这样工作的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1773080|+<input+name="abc"+autofocus></input>|code-block|syntax|javascript|1773081|希望这能有所帮助。|1773082|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Simply write autofocus in the textfield. This is simple and it works like this:

<pre><code> &lt;input name="abc" autofocus&gt;&lt;/input&gt;
</code></pre>

Hope this helps.

blocks|key|1557691|text|您可以通过以下方式使用jquery轻松完成此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1557692|<script+type="text/javascript">

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

</script>|code-block|syntax|javascript|1557693|通过在$(document).ready()中调用此函数。|offset|length|style|CODE|1557694|这意味着该函数将在DOM就绪时执行。|1557695|有关READY函数的更多信息，请参阅：http://api.jquery.com/ready/|1557696|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/ready/^0|0|0|3|J|0|0|J|S|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@]|9|@$I|15|J|16|1|17]]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

You can do it easily by using jquery in this way:

<pre><code>&lt;script type="text/javascript"&gt;

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

&lt;/script&gt;
</code></pre>

by calling this function in <code>$(document).ready()</code>. 

It means this function will execute when the DOM is ready.

For more information about the READY function, refer to : <a href="http://api.jquery.com/ready/" rel="noreferrer">http://api.jquery.com/ready/</a>

blocks|key|1557449|text|使用普通的html和javascript|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1557450|<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>|code-block|syntax|javascript|1557451|对于那些使用.net框架和asp.net+2.0或更高版本的人来说，这是微不足道的。如果你使用的是旧版本的框架，你需要编写一些类似于上面的javascript。|1557452|在OnLoad处理程序(通常是page_load，如果您使用的是随visual+studio提供的常用页面模板)中，可以使用：|1557453|C#|1557454|protected+void+PageLoad(object+sender,+EventArgs+e)
{
++++Page.SetFocus(txtMyInputBox);
}|1557455|VB.NET|1557456|Protected+Sub+PageLoad(sender+as+Object,+e+as+EventArgs)

++++Page.SetFocus(txtMyInputBox)

End+Sub|1557457|(*注意，我从通常为Page_Load的函数名中删除了下划线字符，因为在代码块中它拒绝正确呈现！我在标记文档中看不到如何获得下划线以呈现未转义的内容。)|1557458|希望这能有所帮助。|1557459|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

Using plain vanilla html and javascript

<pre><code>&lt;input type='text' id='txtMyInputBox' /&gt;


&lt;script language='javascript' type='text/javascript'&gt;
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();
&lt;/script&gt;
</code></pre>

For those out there using the .net framework and asp.net 2.0 or above, its trivial. If you are using older versions of the framework, you'd need to write some javascript similar to above.

In your OnLoad handler (generally page_load if you are using the stock page template supplied with visual studio) you can use:

C#

<pre><code>protected void PageLoad(object sender, EventArgs e)
{
 Page.SetFocus(txtMyInputBox);
}
</code></pre>

VB.NET

<pre><code>Protected Sub PageLoad(sender as Object, e as EventArgs)

 Page.SetFocus(txtMyInputBox)

End Sub
</code></pre>

(* Note I removed the underscore character from the function name that is generally Page_Load since in a code block it refused to render properly! I could not see in the markup documentation how to get underscores to render unescaped.)

Hope this helps.

blocks|key|1557620|text|我的意思是，选择页面上第一个可见的已启用文本字段的“最干净”方法是使用jQuery，并执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1557621|$(document).ready(function()+{
++$('input:text[value=""]:visible:enabled:first').focus();
});|code-block|syntax|javascript|1557622|希望这能帮上忙。|1557623|谢谢..。|1557624|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

IMHO, the 'cleanest' way to select the First, visible, enabled text field on the page, is to use jQuery and do something like this:

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

Hope that helps...

Thanks...

blocks|key|1557347|text|<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"+/> ++
<input+id="Box2"+size="30"+/>++
</body>++
</html>++|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1557348|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;html&gt; 
&lt;head&gt; 
&lt;script language="javascript" type="text/javascript"&gt; 
function SetFocus(InputID) 
{ 
 document.getElementById(InputID).focus(); 
} 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body onload="SetFocus('Box2')"&gt; 
&lt;input id="Box1" size="30" /&gt;&lt;br/&gt; 
&lt;input id="Box2" size="30" /&gt; 
&lt;/body&gt; 
&lt;/html&gt; 
</code></pre>

blocks|key|1772731|text|作为一般建议，我建议不要从地址栏中偷走焦点。(Jeff+already+talked+about+that.)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1772732|加载网页可能需要一些时间，这意味着在用户键入pae+URL后很长一段时间内，您的焦点可能会发生变化。然后他可能会改变主意，在你加载页面并窃取焦点将其放入文本框中时，重新开始输入url。|1772733|这就是我删除Google作为我的起始页面的唯一原因。|1772734|当然，如果您控制网络(本地网络)，或者如果焦点改变是为了解决一个重要的可用性问题，请忘记我刚才所说的:)|1772735|entityMap|0|LINK|mutability|MUTABLE|url|http://www.codinghorror.com/blog/archives/001011.html^0|N|V|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

As a general advice, I would recommend not stealing the focus from the address bar. (<a href="http://www.codinghorror.com/blog/archives/001011.html" rel="noreferrer">Jeff already talked about that.</a>)

Web page can take some time to load, which means that your focus change can occur some long time after the user typed the pae URL. Then he could have changed his mind and be back to url typing while you will be loading your page and stealing the focus to put it in your textbox.

That's the one and only reason that made me remove Google as my start page.

Of course, if you control the network (local network) or if the focus change is to solve an important usability issue, forget all I just said :)

blocks|key|1773000|text|我有一个稍微不同的问题。我想要autofocus，但又想让placeholder文本保持跨浏览器。一些浏览器会在字段被聚焦时立即隐藏placeholder文本，而另一些则会保留它。我要么让占位符保持跨浏览器，这有奇怪的副作用，要么停止使用autofocus。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1773001|因此，我监听针对body标记键入的第一个键，并将该键重定向到目标输入字段。然后，所有涉及的事件处理程序都会被杀死，以保持事情的整洁。|1773002|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);|code-block|syntax|javascript|1773003|https://jsfiddle.net/b9chris/qLrrb93w/|1773004|entityMap|0|LINK|mutability|MUTABLE|url^0|F|9|T|B|1U|B|3B|9|0|0|0|0|12|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|N]]]]

I had a slightly different problem. I wanted <code>autofocus</code>, but, wanted the <code>placeholder</code> text to remain, cross-browser. Some browsers would hide the <code>placeholder</code> text as soon as the field focused, some would keep it. I had to either get placeholders staying cross-browser, which has weird side effects, or stop using <code>autofocus</code>.

So I listened for the first key typed against the body tag, and redirected that key into the target input field. Then all the event handlers involved get killed off to keep things clean.

<pre><code>var urlInput = $('#Url');

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

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

$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);
</code></pre>

<a href="https://jsfiddle.net/b9chris/qLrrb93w/" rel="nofollow noreferrer">https://jsfiddle.net/b9chris/qLrrb93w/</a>

blocks|key|1773111|text|可以在输入元素上设置autofocus|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1773112|<input+type="text"+class="b_calle"+id="b_calle"+placeholder="Buscar+por+nombre+de+calle"+autofocus="autofocus">|code-block|syntax|javascript|1773113|entityMap^0|A|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

It is possible to set <code>autofocus</code> on input elements

<pre><code>&lt;input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus"&gt;
</code></pre>

blocks|key|1557999|text|由于JavaScript备份对我不起作用，我调整了上面Dave1010的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1558000|<input+type="text"+id="my-input"+/>|code-block|syntax|javascript|1558001|和Javascipt备份检查：|1558002|if+(!(document.getElementById("my-input").hasAttribute("autofocus")))+{
++++document.getElementById("my-input").focus();
}|1558003|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Adjusted my answer from Dave1010 above as JavaScript backup didn't work for me.
<pre><code>&lt;input type=&quot;text&quot; id=&quot;my-input&quot; /&gt;
</code></pre>
And the Javascipt backup check:
<pre><code>if (!(document.getElementById(&quot;my-input&quot;).hasAttribute(&quot;autofocus&quot;))) {
 document.getElementById(&quot;my-input&quot;).focus();
}
</code></pre>

blocks|key|1557876|text|如果您使用的是ASP.NET，那么您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1557877|yourControlName.Focus()|code-block|syntax|javascript|1557878|在服务器上的代码中，这将在页面中添加适当的JavaScript。|1557879|其他服务器端框架可能具有等效的方法。|1557880|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you are using ASP.NET then you can use

<pre><code>yourControlName.Focus()
</code></pre>

in the code on the server, which will add appropriate JavaScript into the page.

Other server-side frameworks may have an equivalent method.

blocks|key|1772931|text|使用下面的代码。对我来说，它是有效的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1772932|jQuery("[id$='hfSpecialty_ids']").focus()|code-block|syntax|javascript|1772933|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use the below code. For me it is working

<pre><code>jQuery("[id$='hfSpecialty_ids']").focus()
</code></pre>

How do you automatically set the focus to a textbox when a web page loads?

Is there an HTML tag to do it or does it have to be done via Javascript?

How do you automatically set the focus to a textbox when a web page loads?

服务器

jQuery

如何在加载网页时自动将焦点设置为文本框？有没有HTML标签来做这件事，还是必须通过Javascript来做？

问如何在加载网页时自动将焦点设置为文本框？
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在加载网页时自动将焦点设置为文本框？EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在加载网页时自动将焦点设置为文本框？
EN