JavaScript가없는 기본 HTML 양식 포커스

159

JavaScript를 사용하지 않고 HTML 양식에 기본 입력 초점을 설정할 수 있습니까?

<html>
  <form>
    Input 1: <input type="text" name="textbox1"/>
    <br/>
    Input 2: <input type="text" name="textbox2"/>
  </form>
</html>

JavaScript를 사용하지 않고 양식을로드 할 때 (사용자가 js를 비활성화했을 때 동작이 발생하도록) 텍스트 상자 중 하나에 기본 포커스를 설정하고 싶습니다.

html accessibility

— 아담 젠킨
소스

292

HTML5에서 할 수 있지만 그렇지 않으면 JavaScript를 사용해야합니다.

HTML5를 사용하면 다음 autofocus과 같은 양식 요소 에 추가 할 수 있습니다 .

<input type="text" name="myInput" autofocus />

이것은 HTML5를 지원하는 브라우저 (또는 HTML5의이 특정 부분을 지원하는 브라우저)에서 작동하지만 아시다시피, 모든 사용자가 아직 사용할 수있는 것은 아닙니다.

— 제이크 루카스
소스

22

알아 두어야 할 사항 ... 포커스가있는 양식 요소를 설정 한 경우 스크린 리더와 같은 AT (Assisted Technology)를 사용하는 사람은 포커스가있는 필드 이전의 메뉴 및 기타 내용을 보려면 백업해야합니다.

내 생각에 선호되는 방법은 가능한 경우 스킵 링크를 제외하고 어떤 필드에도 초점을 두지 않는 것입니다. 그러면 페이지 내용으로 건너 뛰거나 위에서 아래로 페이지를 읽을 수있는 옵션이 제공됩니다.

— 그렉
소스

시각적으로 숨겨져 있지만 화면 판독기를 통해 액세스 할 수있는 스킵 링크를 추가하는 것이 좋습니다!

— James Cazzetta

접근성에 대해 배울 것이 너무 많습니다. 우리 나머지 사람들이 배울 수 있도록이 답변을 추가해 주셔서 감사합니다!

— Andrew Steitz

3

다른 사람들이 말했듯이 Javascript가 없으면 기본 필드를 보장 할 수 없습니다. 사용자가 액세스하려는 여러 필드가있는 경우 시도 할 수있는 대체 옵션이 accesskey속성을 사용하는 것입니다. 이것은 본질적으로 사용자가 브라우징 중에 나중에 즉시 필드 중 하나로 돌아갈 수 있음을 의미하며, 이는 스크린 리더 등의 사용자에게 유용 할 수 있습니다 ...

이 주제에 관한 Wikipedias 기사는 매우 유용합니다 -http : //en.wikipedia.org/wiki/Access_key

0

어떤 형태의 스크립팅이 없으면 불가능합니다. Google 홈페이지에서도 검색 필드에 초점을 맞추기 위해 Javascript가 필요합니다.

— 에반 뮬 로브 스키
소스

1

그것은. Google은 HTML5를 지원하지 않는 브라우저에 자바 스크립트를 추가합니다. 모든 앱에서 고려할 가치가있는 것.

— mvbrakel

-8

tabindex 속성을 사용하고 기본 텍스트 상자에서 가장 낮은 값 을 사용할 수 있습니다 . 브라우저 지원에 대해서는 여기를 확인하십시오.

http://reference.sitepoint.com/html/object/tabindex#compatibilitysection

이 사이트는

(거의 다른 모든 경우, 즉 양식 컨트롤 및 링크) tabindex는 탁월한 지원을 제공합니다.

— 카 히트
소스

3

"tabindex"속성은 "tabindex = 1"인 요소조차도 어떤 요소에도 자동으로 초점을 두지 않습니다. <tab> (또는 클릭)을 누르면 탭 순서의 첫 번째 요소에 초점이 맞춰집니다.

— 클린트 Pachl