[html] div를 “탭 가능”으로 만드는 방법은 무엇입니까?

Program / 글쓴이

div 요소 인 버튼이 있는데 사용자가 키보드의 탭 키를 누르고 그 사이를 이동할 수 있도록 만들고 싶습니다. 앵커 태그로 텍스트를 래핑하려고 시도했지만 작동하지 않는 것 같습니다.

누구에게 해결책이 있습니까?

답변

요소에 tabindex속성을 추가 하십시오 div.

예:

<div tabindex="1">First</div>
<div tabindex="2">Second</div>

steveax의 주석에 따라 탭 순서가 페이지의 요소 위치에서 벗어나지 않도록 tabindex하려면 0다음 과 같이 설정하십시오 .

<div tabindex="0">First</div>
<div tabindex="0">Second</div>

답변

관심있는 사람들을 위해 수락 된 답변 외에도 다음 jquery를 추가하여 탭할 때 div 스타일을 변경하고 Enter 및 Space를 처리하여 클릭을 트리거 할 수 있습니다 (그러면 클릭 핸들러가 나머지 작업을 수행합니다)

$(document).on('focus', '.button',function(){
    $(this).css('border','1px dotted black')
});
$(document).on('keyup', '.button',function(e){
    if(e.which==13 || e.which==32)
        $(this).click()
});

누군가 이것을 jq 플러그인 $ (). makeTabStop으로 만들었다 고 확신합니다.

답변

tabindex="0"탭으로 만들려는 각 div에 속성을 추가하십시오 . 그런 다음 CSS 의사 클래스 : hover 및 : focus를 사용합니다. 예를 들어 앱 사용자에게 div에 포커스가 있고 클릭 할 수 있음을 나타냅니다. 클릭을 처리하려면 JavaScript를 사용하십시오.

var doc = document;
var providers = doc.getElementsByClassName("provider");

for (var i = 0; i < providers.length; i++) {
    providers[i].onclick = function() {
      console.log(this.innerHTML);
    };
}
.provider {
    flex: 0 1 auto;
    align-self: auto;
    width: 256px;
    height: 48px;
    margin-top: 12px;
    margin-right: 12px;
    text-align: center;
    line-height: 48px;

    text-transform: uppercase;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 10%;
    background-color: gray;
}

.provider:hover{
  cursor: pointer;
}

.provider:focus{
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
}
<h4>Click in this area first then press tab</h4>
<div id="email" class="provider" tabindex="0">email</div>
<div id="facebook" class="provider" tabindex="0">facebook</div>
<div id="github" class="provider" tabindex="0">github</div>
<div id="google" class="provider" tabindex="0">google</div>
<div id="twitter" class="provider" tabindex="0">twitter</div>

스 니펫 확장

답변

jquery를 사용하여 키를 눌러 요소를 탭 및 클릭 가능하게 만듭니다.

가정

  • 탭할 수없고 클릭 할 수없는 유형이고 클릭 할 수 있어야하는 모든 요소에는 onclick 속성이 있습니다 (클래스 또는 다른 속성으로 변경 될 수 있음).
  • 모든 요소는 동일한 유형입니다. div를 사용하겠습니다.
  • jquery를 사용하고 있습니다.

샘플 HTML : 

...

<div onclick="clicked(this)">Button 1</div>
<div onclick="clicked(this)">Button 2</div>
<div onclick="clicked(this)">Button 3</div>

...

Jquery 코드 : 페이지가로드되었을 때 실행되는 코드입니다. HTML 페이지에서 실행해야합니다.

$(()=>{
    // make divs with an onclick attribute tabbable/clickable
    $('div[onclick]')
        .attr('tabindex', '0')                     // Add tab indexes
        .keypress((evt)=>{
            var key = evt.key;
            evt.preventDefault();                  // Ensure all default keypress
                                                   // actions are not used
            if (key === ' ' || key === 'Enter') {  // Only send click events for Space
                                                   // or Enter keys
                evt.currentTarget.click();         // Run the click event for element
            }
        });
});

여기 에서 작업 예를 찾을 수 있습니다 .

답변