반응형
[Tip] checkbox 초기화하기
모바일에서의 햄버거 메뉴를 구현 하는 중, 다른 페이지로 이동했다가 모바일에서 뒤로 가기를 하면
햄버거 메뉴가 자동적으로 열리는 오류가 있었습니다.
페이지가 이동하면서 checkbox에 checked가 초기화되지 않고 자동적으로 checked되었기 때문에 발생한 오류였는데요.
checked를 풀기 위해서는 페이지가 열릴 때마다 checkbox를 초기화하는 작업이 필요했습니다.
꽤 여러 삽질을 거쳤는데요;; 제 경우는 아래 세 경우를 모두 적용하고 나서야 해당 오류에서 벗어날 수 있었습니다.
혹시 몰라 적용된 예시도 올려두겠습니다.
(해당 내용은 두번째 방법을 제외한 내용이 들어 있습니다.)
1/ 별도 js 스크립트에서 초기화 내용 넣기
window.onpageshow = function(event) {
if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {
var chk = $("#menu__toggle").is(":checked");
if(chk) {$("#menu__toggle").prop("checked", false).attr("checked", false).removeAttr("checked");}
}
};
2/ index.html에 넣기 (jquery 사용)
<script>
function uncheck(){
$(':checkbox:checked').prop('checked',false);
};
</script>
<body onLoad="uncheck()">
3/ autocomplete="off"를 넣기
<input type="checkbox" autocomplete="off">
* 첫번째 방법 참고 사이트 : https://dev-t-blog.tistory.com/9 , http://amabile29.blog.me/221548195341
* 두번째 방법 참고 사이트 : https://itbloger.tistory.com/1019
* 세번쨰 방법 참고 사이트 : http://triki.net/prgm/126
* 햄버거 메뉴 참고 사이트 : https://codepen.io/andreykrokhin/pen/mGEqja
반응형
'[공부]하는 몽씨 > tip' 카테고리의 다른 글
| [Tip] 웹폰트 적용 방식 (0) | 2021.09.08 |
|---|---|
| [Tip] magnific popup을 iframe 안에서 열었을 시 문제점 (0) | 2020.11.02 |
| [Tip] tab(탭)에 카카오맵 api 지도 여러개 넣기 (0) | 2020.04.03 |
| [Tip] 크롬에서 현재 창 닫기 (window.close) (0) | 2020.04.03 |
| [Tip] 워드프레스 관련 메모2 (0) | 2020.03.18 |
