순수 CSS에서 클릭 버튼 제출 및 링크를 비활성화하는 방법은 무엇입니까?

HTML과 CSS만으로 시각적으로 역동적이고 인터랙티브 한 경험을 만들도록 스스로에게 도전했습니다 (자바 스크립트 없음). 지금까지 순수 CSS 및 HTML에서 할 수 없었던 기능을 찾지 못했습니다. 이것은 아마도 조금 더 어려울 것입니다.

나는 두 번 클릭에서 사용자 방지하기 위해 필요 <a>, <input type="submit">그리고 <button>태그를. 이는 양식을 이중 제출하거나 실수로 URL에 2 개의 GET 요청을하는 것을 방지하기위한 것입니다. 순수한 CSS에서 어떻게 할 수 있습니까? disabledJS없이 설정할 수 없더라도 2020 년에이를 처리 할 수있는 마스킹 기법이나 스타일 조합이 있어야합니다.

다음은 간단한 시도 예입니다.

.clicky:focus{
  display: none;
  pointer-events: none;
}

<a href="#down" class="clicky">test</a>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p id="down">target</p>

스 니펫 확장

불행히도, 어떤 이유로 실제 클릭 이벤트가 시작되기 전에이를 비활성화합니다. 아마도 앵커가 테스트하기 가장 좋은 방법이 아닐까요? 계속해서 더 노력하겠습니다.

html css

— 파라곤 512
소스

처음 제출 한 후에 양식을 작성해 줄 수 있습니까?

— SIGSTACKFAULT

아마 pointer-events: all활성 또는 : 초점 상태 기본적으로가 아니라에서? pointer-events: none그 상태에 대한 설정처럼 ?

— Jeremy Harris

어쩌면 el:active, el:focus포인터 이벤트와 함께

— Paragon512

이 작동합니까? : 활성 {표시 : 없음; // 예를 들어}

— MD Hesari

시도가 추가되었습니다. 클릭을 시작하기 전에 비활성화했습니다.

— Paragon512

답변:

한 가지 아이디어는 첫 번째 클릭 후 두 번째 레이어를 피하기 위해 요소 상단에 레이어가있는 것입니다.

다음은 1s두 번의 클릭 으로 지속 시간을 줄일 수 있는 기본 아이디어 입니다. 버튼 / 링크를 클릭하면 이후에만 다시 클릭 할 수 있습니다 1s.

트릭을 더 잘 볼 수 있도록 작은 오버레이를 추가하고 있습니다

.button {
  position:relative;
  display:inline-block;
}
.button span{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:100%;
  z-index:-1;
  animation:overlay 1s 0s; /* Update this value to adjust the duration */
  transition:0s 2s; /* not this one! this one need to be at least equal to the above or bigger*/
}


.button *:active + span {
  animation:none;
  bottom:0;
  transition:0s 0s;
}

@keyframes overlay {
  0%,100% {
    z-index:999;
    background:rgba(255,0,0,0.2); /* To illustrate */
  }
}

<div class="button">
  <button>Click me</button>
  <span></span>
</div>

<div class="button">
  <a href="#" onclick="console.log('clicked !')">Click me</a>
  <span></span>
</div>

스 니펫 확장

— 테마 니 Afif
소스

<a>태그 와 작동하지 않는 것 같습니다

— Aleksandr Belugin

@AleksandrBelugin 잘 작동하고 있습니다. 업데이트를 확인하십시오. 어쩌면 당신이 잘못한 것

— Temani Afif

그래도 버튼을 두 번 클릭 할 수 있다고 생각합니까? 버튼이 두 번째로 눌리는 것을 볼 수 있습니다.

— Paragon512

@TemaniAfif <a href="#" onclick="console.log('lalala')">Click me</a>나머지 코드와 연결하기 위해 콘솔에 아무것도 기록하지 않습니다. imho 링크를 클릭하지 않았다는 의미

— Aleksandr Belugin

이것을 테스트하는 가장 좋은 방법은 <a>태그를 사용하는 것 같습니다 . 제출 버튼으로 테스트를 시도했지만 네트워크 관리자를 모니터링하는 것이 이상하고 일관되지 않습니다. 링크를 클릭해도 클릭이 발생하지 않습니다. 대상을 앵커로 설정하고 링크를 클릭하면 링크가 비활성화되지만 앵커로 이동하지는 않습니다.

— Paragon512

첫 번째 해결책

아이디어는 radio button상태 를 사용 :checked하여 수정하는 것입니다. 우리는 숨길 radio원과 때 :checked를위한 <a>메이크업 pointer-events: none;과에 buttons우리가 그들을 숨기고 보여 다른 유형의 disabled사람을.

div {
  margin: 10px;
}

#radio0, .my-checkbox {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}

#radio0 + a label {
  cursor: pointer;
}

#radio0:checked+a {
  pointer-events: none;
}

.btn-one,
.btn-two {
  padding: 0;
}

.btn-one>label,
.btn-two>label {
  padding: 1px 6px;
}

.my-checkbox:checked+.btn-one {
  display: none;
}

.btn-two {
  display: none;
}

.my-checkbox:checked+.btn-one+.btn-two {
  display: inline-block;
}

<div>
  <input id="radio0" type="radio" onclick="console.log('radio0 clicked!')">
  <a href="#">
    <label for="radio0">
        Click the link!
      </label>
  </a>
</div>

<div>
  <input type="radio" id="radio1" class="my-checkbox">
  <button type="button" class="btn-one" onclick="console.log('radio1 clicked!')">
      <label for="radio1">Click the button!</label>
    </button>
  <button type="button" class="btn-two" onclick="console.log('radio1 NOT clicked!')" disabled>
        <label for="radio1">Click the button!</label>
      </button>
</div>

<div>
  <input type="radio" id="radio2" class="my-checkbox">
  <button type="submit" class="btn-one" onclick="console.log('radio2 clicked!')">
    <label for="radio2">Submit!</label>
  </button>
  <button type="submit" class="btn-two" onclick="console.log('radio2 NOT clicked!')" disabled>
      <label for="radio2">Submit!</label>
    </button>
</div>

스 니펫 확장

두 번째 해결책

이것에 적합합니다 links. 아이디어는 사용하는 것 :target입니다. 타지 element는 먼저 숨겨져 있습니다. 그런 다음 사용을 목표로하는 경우 :target에 pointer-events: none;의 <a>.

코드 스 니펫 표시

#anchor {
  display: none;
}

#anchor:target {
  display: block;
}

#anchor:target+a {
  pointer-events: none;
}

<div>
  <span id="anchor"></span>
  <a href="#anchor" onclick="console.log('anchor clicked!')">Click the link!</a>
</div>

스 니펫 확장

— 알렉산드르 벨 루긴
소스