본문 바로가기
IT_Developers/Javascript

JavaScript - 버튼 더블클릭 방지 유효성 처리하기 / onclick 안에 쉽게

by 고코더 2019. 4. 4.

프론트에서 더블클릭 되면 안되는 버튼이 있을 때


안녕하세요.
고코더 입니다.


프론트에서 가끔 두번 클릭되면 안되는 기능 버튼이 있습니다.
물런 이런 유효성 체크는 서버사이드 언어나 
백엔드에서 처리해야 하는게 정석이지만

프론트 개발자라면
UI에서도 기본적인 실수 방지 정도는 해줘야겠지요.

사실 버튼을 두번 클릭하지 못하게 하는 방법은 많지만
오늘은 간단하게 onclick 에 넣어 처리할 수 있는 방법을 소개하려고 합니다.


▼ 우선 제가 작성한 예제 소스를 보겠습니다. 
1
2
3
4
5
6
7
8
<html>
<body>    
                                                   
    <input id="gocoder" type="button" onClick="this.disabled=true;" value="더블클릭 방지">  
    <input id="gocoder" type="image" src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" onClick="this.style.visibility='hidden';">  
 
</body>
</html>
cs


개발자가 아니어도 원리는 금방 눈치 채셨을텐데요.
input 타입이 button일 경우 disabled 를 만들고
이미지 버튼일 경우에는 visibility를 이용해 다시 클릭하지 못하게
이미지를 가려버리는 방식 입니다.

▼ button일 경우 버튼을 불능화 처리
this.disabled=true;

▼ 이미지일 경우 히든 처리 
this.style.visibility='hidden';



마무리


프론트는 어떤식으로든 두번 전송이 가능하므로 
서버 언어 쪽에서 백엔드에서 처리 해줘야 합니다.


댓글