모든 HTML을 갖지 않고 HTML 입력 요소에 초점을 맞추는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/808908

  •  03-07-2019
  •  | 
  •  

문제

먼저, 배경 : Tapestry 4에서 작업하고 있으므로 특정 페이지의 HTML은 애플리케이션 전체에 흩어져있는 다양한 비트와 HTML 조각에서 함께 묶습니다. 내가 작업중 인 구성 요소를 위해 나는 <body> 태그를 줄 수 없습니다 onload 기인하다.

구성 요소에는 페이지가로드 될 때 초점이 필요한 입력 요소가 있습니다. 본문 태그에 액세스하지 않고 페이지로드에서 파일 입력 (또는 다른 텍스트 유형 입력)에 초점을 설정하는 방법을 알고 있습니까?

나는 몸에 스크립트를 삽입하려고 시도했습니다
document.body.setAttribute('onload', 'setFocus()')
(여기서 setfocus는 파일 입력 요소에 초점을 맞추는 기능을 설정하는 기능) 그러나 작동하지 않았습니다. 그래도 나는 그것에 놀랐다고 말할 수 없다.

편집하다:
언급 된 바와 같이, 나는 실제로 페이지 구성 요소로 이것을해야합니다. 결국 페이지에서 첫 번째 편집 가능하고 보이는 입력에 초점을 맞추기 위해 사용하는 스크립트에 파일 형 입력을 추가했습니다. 이 문제를 연구 할 때는이 문제를 해결하는 데 도움이되지 않았습니다.

도움이 되었습니까?

해결책

이것은 나를 위해 잘 작동했습니다.

<script>
  function getLastFormElem(){
    var fID = document.forms.length -1;
    var f = document.forms[fID];
    var eID = f.elements.length -1;
    return f.elements[eID];
  }
</script>


<input name="whatever" id="maybesetmaybenot" type="text"/>
<!-- any other code except more form tags -->

<script>getLastFormElem().focus();</script>

다른 팁

<script>
window.onload = function()  {
     document.getElementById('search_query').select();
    //document.getElementById('search_query').value = ''; 
    // where 'search_query' will be the id of the input element
};
</script>

유용해야한다고 생각합니다 !!!

창에 onload 핸들러를 줄 수 있습니다

window.onload = setFocus;

캡슐화에 근본적인 문제가 있다고 생각합니다. 대부분의 경우 이벤트 핸들러를 ONLOAD 이벤트에 첨부 할 수 있지만 http://ejohn.org/projects/flexible-javaScript-events/ John Resig는이 작업을 수행하는 방법에 대해서는 페이지 구성 요소가 페이지 구성 요소를 관리해야합니다.

놀아보십시오 Tabstop 기인하다

우선, 입력 파일은 다른 입력과 동일하지 않으므로이를 염두에 두어야합니다. 입력 파일이 초점을 맞추면 읽기 만 읽거나 브라우저가 일부 파일을 선택하려면 대화 상자를 팝업해야합니다.

이제 다른 입력의 경우 일부 요소에서 일부 온부하 이벤트를 시도 할 수 있습니다. 그 기능이라고 말하지 않고 JavaScript 코드를 넣으면 브라우저가 읽는 동안 실행됩니다. 같은 것 :

<script type="text/javascript">

function yourFunction()
{
   ...;
};

alert('hello world!");

yourFunction();

</script>

브라우저가 읽을 때 경고 후에 함수가 실행됩니다.

가능하면 jQuery를 사용하여 JavaScript를 수행해야합니다. 그것은 당신의 살아있는 soooo를 훨씬 쉽게 만들 것입니다 .... :)

와 함께 jQuery 다음과 같이 할 수 있습니다.

$(function() {
    $("input:file").eq(0).focus()
})

평범한 JavaScript를 사용하면 다음과 같이 수행 할 수 있습니다.

var oldWindowOnload = window.onload; // be nice with other uses of onload 
window.onload = function() {
    var form = document.forms[0];
    for(i=0; i < form.length; i++) {
        if (form[i].type == "file") {
            form[i].focus();
        }
    }
    oldWindowOnload();
}

일반 JavaScript를 사용한보다 정교한 솔루션은 참조하십시오 웹 페이지의 첫 번째 입력으로 초점을 설정하십시오 CodeProject에서.

Scunliffe의 솔루션은 사용성 이점이 있습니다.

페이지 스크립트가 천천히로드되면 "Onload"이벤트에서 Focus () 호출은 사용자가 페이지를 스크롤하면 매우 불쾌한 페이지 "점프"를 만듭니다. 따라서 이것은보다 사용자 친화적 인 접근 방식입니다.

<input id="..."></input>
... really small piece of HTML ...
<script>getTheDesiredInput().focus();</script>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top