tab초점관련
본문
팝업존에서 초점이 정지버튼으로 가야하는데 가지 않고 넘어갑니다 a태그로 만들었는데 이유가 뭘까요?
원래는 이렇게 진행되어야 합니다
코드는 이렇게 되어있는데 왜 정지버튼에 초점이 가지않을까요?
답변 3
a 태그에
css 에서
아래와 같은게 선언되어 있는건 아닐까요?
a {
outline: none;
}
테스트 해보려면
아래 css 를 추가하고 탭으로 포커스 맞추는 테스트를 해보세요.
a:focus {
border: 2px solid #f00 !important;
}
아래와 같은 경우가 아닌가 해서요.
https://codepen.io/daltanworks/pen/YzBQOEm
<p>탭으로 이동해서 초점을 맞추어 보세요</p>
<hr>
<h3>outline 이 제거된 경우</h3>
<a href="#">
Pause 포커스 불가
</a>
<hr>
<h3>outline 이 제거된 경우</h3>
<a href="#" class="enabled_tab">
Pause 포커스 가능
</a>
<a href="#" class="enabled_tab">
Resume 포커스 가능
</a>
a {
outline: none;
}
a.enabled_tab {
border: 2px solid transparent;
}
a.enabled_tab:focus {
border: 2px dashed #f00;
}
만약 위와 같은 경우가 맞다면,
초점되었음이 화면에 표시 되지는 않지만,
탭을 클릭하고, 엔터를 치면 기능은 작동할걸요?
수정 성공했습니다 감사합니다
흠...
autoplay.stop() 및 autoplay.start()를 사용하여 슬라이더의 자동 재생을 정지 및 재생하도록 해야하는데 빠져있습니다.
또한 정지버튼에 초점을 가게 할려면,
tabindex 속성을 추가하고,
해당 요소에 focus() 메서드를 호출하면 됩니다.
수정성공했습니다 감사합니다
보시면 a 태그 내부에서 태그 클릭시 동작은 자바스크립트를 막고
대신 스크립트 단에서 클래스를 찾아 작동하는것으로 되어있네요.
포커스가 꼭 버튼으로 가야 한다는 법은 없습니다.
웹표준도 아니구요
혹시 버튼에 꼭 가야한다면 스크립트 단에서 클래스를 버튼 쪽으로 찾아주면 될까요?
초점이 가야해서요!
답변을 작성하시기 전에 로그인 해주세요.