[jQuery]티스토리 댓글 중복 입력 방지하는 방법(버튼 disabled)

티스토리 댓글은 가끔 폼은 입력 버튼을 누른 다음 몇 초의 딜레이가 발생합니다.

그래서 댓글이 정상적으로 입력중이라는 표시가 없기 때문에

방문객들이 댓글 입력 버튼이 제대로 되었는지 판단하기 어렵기 때문에

여러번 댓글입력버튼을 클릭 하게 됩니다. 그럼.. 댓글이 중복으로 생겨버리죠;;

스팸처럼.. 일일히 지울기도 귀찮고..

사실 기존에는

http://zzznara2.tistory.com/625 by 꿈꾸는 우림님께서

제작 해주신 스크립트를 사용 하고 있었습니다.

중복 체크를 막는 기능을 문의 드렸는데 버튼을 disabled 하는 방식으로 좋은 아이디어를 내시고

스크립트를 만들어 주셨습니다.

disabled는 비활성 상태로 만드는 코드입니다.

문제점

하지만 위 방식은 버튼을 클릭하자마자 바로 disabled 하기 때문에.. 몇 가지 문제가 발생합니다.

첫 번째는 티스토리 댓글은 입력 폼을 누르면 전체 페이지를 새로고침 하지 않고,

댓글 영역만 새로 고침을 하게 되는데 이때 스크립트가 갱신 되어 버리면

두 번째 댓글 부터는는 작동을 하지 않습니다.

두 번째는 티스토리는 자체 TAS플러그인을 가동중입니다.

이것은 별개로 설정할 수 있는게 아니고 티스토리 블로그를 사용하는 사람들은 의무적으로 포함되어 있는 것이죠.

간혹 제가 차단 했냐고 물어보는 분들이 있는데 이 멘트는 자체 플러그인에서 차단 한 것 입니다.

정확하게 발생하는 조건은 모르지만

영문만 적히거나, URL이 적히거나, 코드등등을 적을 때 발생 하는 것으로 알고 있습니다.

(고객센터에 이멘트좀 바꿔달라고 문의를 넣어두긴 했는데... 언젠간 수정이 되겠죠ㅠ;)

제가 직접 차단 목록을 적었을 때는 아래의 멘트나 나타납니다.

메세지 : 차단된 이름을 사용하고 계시므로 댓글을 남기실 수 없습니다.

차단된 IP를 사용하고 계시므로 댓글을 남기실 수 없습니다.

차단된 홈페이지 주소를 사용하고 계시므로 댓글을 남기실 수 없습니다.

금칙어를 사용하고 계시므로 댓글을 남기실 수 없습니다.

암튼 저는 욕설이나 스팸은 삭제는 하지만 차단은 한 적이 없네요.ㅠ

저런 차단 또는 본문 확인 메세지 이후에는 작동이 되질 않습니다.

본격적으로 시작 - HTML 편집

그래서 위 방법을 두고 고민하던 차에

몇 초간만 disabled 시키면 완벽하진 않지만 두 번째 문제는 해결 할 수 있을 것 같아서 시도해 보았습니다.

3초간 비활성화 시키는 방식입니다. 숫자를 변경하면 시간을 조정 가능합니다.

당연히 jQuery를 사용 해야겠지요? 만약 기존에 로드하고 있으면 굳이 jQuery는 추가하지 않아도 됩니다.


<!-- jQuery -->
	<!--[if lt IE 9]>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<![endif]-->
	<!--[if gte IE 9]><!-->
	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
	<!--<![endif]-->

구형 IE에서는 1.11.3버전을 그외에는 2.1.3 버전을 로드하는 방식입니다.

버튼 3초간 disabled(비활성) 하기


<script>
var fewSeconds = 3;
$("button[type=submit]").click(function(){
    var btn = $(this);
    btn.prop("disabled", true);
    setTimeout(function(){
        btn.prop("disabled", false);
    }, fewSeconds*1000);
});
</script>
</body>

</body> 위에 해당 코드를 붙여넣기 해줍니다. 그러면 앞으로

댓글 입력을 중복으로 해서 여러번 생성된 댓글을 삭제할 필요가 없을 것입니다.

테스트를 해보니 이렇게 하니 첫 번째 문제도 해결 되는 군요.

갱신을 했을 때 스크립트가 작동안하는 것도 해결 되었습니다.!!!

간혹 jQuery 버전이 다를 경우 .prop 대신 .attr을 사용 해야 하는 경우가 있습니다.

이럴 경우 스크립트 코드 수정을 해주시거나

jQuery 버전을 올려주세요. (이 것을 더 권장합니다.)

jQuery 1은 1.12.0 까지 나온 것으로 아는데 1.11.3 사용을 권장합니다. 가장 오류 없고 잘됩니다.

아무튼 이것만 추가해도 귀찮은 작업 하나를 안해도 될 것입니다.

혹시나 html이 너무 길어지는게 싫으신 분들은

자체 스킨에서 따로 외부스크립트파일에다가 넣어줘도 됩니다.

제가 사용하는 스킨은 main.js 파일에다가 넣어주었습니다.