채택완료

tab초점관련

2023-11-13 (월) 15:27:31 3,215

1893379372_1699856681.2044.png

팝업존에서 초점이 정지버튼으로 가야하는데 가지 않고 넘어갑니다 a태그로 만들었는데 이유가 뭘까요?

1893379372_1699856724.1587.png

원래는 이렇게 진행되어야 합니다

1893379372_1699856776.2442.png

코드는 이렇게 되어있는데 왜 정지버튼에 초점이 가지않을까요?

답변 3개 / 댓글 4개

채택된 답변
+20 포인트
2023-11-13 (월) 17:55:47

a 태그에

css 에서

아래와 같은게 선언되어 있는건 아닐까요?

Copy
a {

     outline: none;

}

테스트 해보려면

아래 css 를 추가하고 탭으로 포커스 맞추는 테스트를 해보세요.

Copy
a:focus {

     border: 2px solid #f00 !important;

}

아래와 같은 경우가 아닌가 해서요.

https://codepen.io/daltanworks/pen/YzBQOEm

Copy
<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>
Copy
a {
  outline: none;
}

a.enabled_tab {
  border: 2px solid transparent;
}

a.enabled_tab:focus {

    border: 2px dashed #f00;

}

만약 위와 같은 경우가 맞다면,

초점되었음이 화면에 표시 되지는 않지만,

탭을 클릭하고, 엔터를 치면 기능은 작동할걸요?

답변에 대한 댓글 1개

수정 성공했습니다 감사합니다
2023-11-13 (월) 18:15:22

흠...

autoplay.stop() 및 autoplay.start()를 사용하여 슬라이더의 자동 재생을 정지 및 재생하도록 해야하는데 빠져있습니다.


또한 정지버튼에 초점을 가게 할려면,
tabindex 속성을 추가하고, 
해당 요소에 focus() 메서드를 호출하면 됩니다.

답변에 대한 댓글 1개

수정성공했습니다 감사합니다
2023-11-13 (월) 16:01:47

보시면 a 태그 내부에서 태그 클릭시 동작은 자바스크립트를 막고

대신 스크립트 단에서 클래스를 찾아 작동하는것으로 되어있네요.

포커스가 꼭 버튼으로 가야 한다는 법은 없습니다.

웹표준도 아니구요

답변에 대한 댓글 2개

혹시 버튼에 꼭 가야한다면 스크립트 단에서 클래스를 버튼 쪽으로 찾아주면 될까요?
초점이 가야해서요!

답변을 작성하려면 로그인이 필요합니다.