답변:
jquery를 사용하는 경우 :
$(function() {
$("#Box1").focus();
});또는 프로토 타입 :
Event.observe(window, 'load', function() {
$("Box1").focus();
});또는 일반 자바 스크립트 :
window.onload = function() {
document.getElementById("Box1").focus();
};그러나 이것은 다른로드 핸들러를 대체한다는 점을 명심하십시오 .Google에서 addLoadEvent ()를 찾아서 교체하지 않고 onload 핸들러를 추가하는 안전한 방법을 찾으십시오.
HTML에는 모든 양식 필드에 대한 autofocus속성 이 있습니다. Dive Into HTML 5 에는 좋은 자습서가 있습니다 . 불행히도 현재 10 미만의 IE 버전에서는 지원 되지 않습니다 .
HTML 5 속성을 사용하고 JS 옵션으로 폴백하려면 :
<input id="my-input" autofocus="autofocus" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>JS가 HTML 요소 아래에 있으므로 jQuery, onload 또는 이벤트 핸들러가 필요하지 않습니다.
편집 : 또 다른 장점은 일부 브라우저에서 JavaScript를 끈 상태로 작동하며 이전 브라우저를 지원하지 않으려는 경우 JavaScript를 제거 할 수 있다는 것입니다.
편집 2 : Firefox 4는 이제 autofocus속성을 지원하므로 IE는 지원하지 않습니다.
autofocus="aufofocus"? 제공 한 모든 링크는 속성을 추가한다고 말합니다 autofocus.
attribute="value"부울 속성 에 일반적으로 사용되었습니다 . HTML5는 "빈 속성 구문"과 함께 제공되었으며 중복성을 떨어 뜨 렸습니다. 이제 우리는 할 수 있습니다<input checked disabled autofocus data-something>
자바 스크립트를 사용해야합니다.
<BODY onLoad="document.getElementById('myButton').focus();">@Ben은 이와 같은 이벤트 핸들러를 추가해서는 안된다는 점에 주목합니다. 다른 질문이지만이 기능을 사용하는 것이 좋습니다.
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}그런 다음 페이지에서 addLoadEvent를 호출하고 원하는 텍스트 상자에 포커스를 설정하는 함수를 참조하십시오.
텍스트 필드에 자동 초점을 작성하십시오. 이것은 간단하며 다음과 같이 작동합니다.
<input name="abc" autofocus></input>도움이 되었기를 바랍니다.
이 방법으로 jquery를 사용하면 쉽게 할 수 있습니다.
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>이 함수를 호출 $(document).ready().
DOM이 준비되면이 함수가 실행됨을 의미합니다.
READY 기능에 대한 자세한 내용은 http://api.jquery.com/ready/를 참조하십시오.
일반 바닐라 HTML 및 자바 스크립트 사용
<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>.net 프레임 워크와 asp.net 2.0 이상을 사용하는 사람들에게는 사소한 것입니다. 이전 버전의 프레임 워크를 사용하는 경우 위와 유사한 일부 자바 스크립트를 작성해야합니다.
OnLoad 핸들러 (일반적으로 Visual Studio와 함께 제공되는 스톡 페이지 템플리트를 사용하는 경우 page_load)에서 다음을 사용할 수 있습니다.
씨#
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(* 참고 코드 블록에서 제대로 렌더링을 거부했기 때문에 일반적으로 Page_Load 인 함수 이름에서 밑줄 문자를 제거했습니다. 마크 업 문서에서 밑줄을 사용하여 이스케이프 처리하지 않는 방법을 알 수 없었습니다.)
도움이 되었기를 바랍니다.
일반적인 조언으로, 주소 표시 줄에서 포커스를 훔치지 않는 것이 좋습니다. ( 제프는 이미 그것에 대해 이야기했습니다. )
웹 페이지를로드하는 데 시간이 걸릴 수 있습니다. 즉, 사용자가 pae URL을 입력 한 후 시간이 오래 걸릴 수 있습니다. 그런 다음 페이지를로드하고 포커스를 도용하여 텍스트 상자에 넣는 동안 그는 마음을 바꾸고 URL 입력으로 돌아갈 수있었습니다.
그것이 Google을 시작 페이지로 제거한 유일한 이유입니다.
물론 네트워크 (로컬 네트워크)를 제어하거나 포커스 변경이 중요한 유용성 문제를 해결하는 것이라면 방금 말한 모든 것을 잊어 버립니다. :)
약간 다른 문제가있었습니다. 나는 원했지만 텍스트가 크로스 브라우저로 유지 autofocus되기를 원했습니다 placeholder. 일부 브라우저는 placeholder필드에 초점을 맞추 자마자 텍스트를 숨기고 일부는 유지합니다. 자리 표시자가 교차 브라우저를 유지해야하는데, 이로 인해 이상한 부작용이 발생하거나 사용을 중단해야합니다autofocus 합니다.
그래서 body 태그에 입력 된 첫 번째 키를 듣고 해당 키를 대상 입력 필드로 리디렉션했습니다. 그런 다음 관련된 모든 이벤트 처리기가 정리되어 깨끗하게 유지됩니다.
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);