개발자의 끄적끄적

[javascript/jquery] jquery 주민등록번호 앞자리 입력 후 다음칸 이동하는 예제 jquery 에서 주민등록번호 앞 6자리와 뒷 1자리를 입력하는 화면을 구현해야 하는 경우가 있습니다. 그럴때는 아래와 같이 이벤트를 이용해서 제어가 가능합니다. 우선 아래와 같이 input 태그가 2개 있다고 가정하고, 각각 maxlength 를 6 과 1 로 설정합니다. 그리고 앞 6자리에 해당되는 input 에 입력되는 값을 기준으로 숫자만 입력되게 허용하고, maxlength 에 설정되어있는 6자리가 입력되면 다음 input 로 포커스가 이동되게 하는 스크립트 입니다! $(document).on("keypress keyup keydown", "input[numberOnly]", function(e){..

[javascript/jquery] chart.js click event example / 차트 js 클릭 이벤트 예제 chart.js 를 이용하여 차트를 구현하다 보면 특정 차트 영역을 클릭했을때, 해당 값이나, 라벨을 가져와야 하는 경우가 있습니다. 그럴때는 아래와 같이 onclick 이벤트를 사용하시면 됩니다. document.getElementById("myChart").onclick = function(evt) { var activePoints = myChart.getElementsAtEvent(evt); if(activePoints.length > 0) { var clickedElementindex = activePoints[0]["_index"]; var label = myChart.data..

[javascript/jquery] jquery selected option attr example / 자바스크립트 선택된 옵션 attr 가져오는 방법 select 태그에서 선택된 값의 value 나 text 를 jquery 로 출력할 수 있습니다. 하지만 그 이외의 데이터를 세팅해서 사용하고 싶은 경우에는 어떻게 해야하나 검색을 해보실텐데요! 아래와 같이 attr 를 이용하시면 됩니다! 예를들어 아래와 같이 id 가 id_select 인 select 태그가 있다고 가정하고, 그안의 옵션들의 value 와 status 라는 attr 이 각각 세팅되어 있다고 가정할때, option_1 option_2 선택된 옵션의 status 값을 가져오고 싶으면, 아래와 같이 attr('status') 를 이용하시면 값..

[javascript/jquery] jquery element exist check example / 자바스크립트 요소 존재여부 확인 방법 jquery 로 특정 id 를 가지는 엘리먼트의 중복을 체크하거나 존재하는지를 확인해야 하는 경우가 종종 있습니다. 그럴때는 length 를 이용하시면 됩니다! 예를들어 아래와 같이 test_div 라는 아이디를 가지는 div 태그가 있다고 가정하고, 위 태그가 존재하는지 확인하고 싶으면, 아래와 같이 lengtg 를 사용하시면 됩니다! if ($('#test_div').length) { alert('test_div exists'); } 참고들 하세요!

[javascript/jquery] 비디오 DOMException: play() failed because the user didn't interact with the document first 에러 해결방법 javascript 에서 video 태그를 조작하다 보면 자동실행이 안되는 경우가 있습니다. 브라우저 에서 보안상 기능을 막은건데요. 소리와 재생을 동시에 할수가 없는 부분이라서 아래와 같은 오류가 나옵니다. DOMException: play() failed because the user didn't interact with the document first. 그럴때는 아래 내용처럼 음소거를 시키고, 재생한 후 음소거를 해제하는 방법으로 처리가 가능합니다! video.muted = true; vid..

[javascript/jquery] jquery get radio checked value example / jquery radio 선택값 가져오기 jquery 에서 radio 버튼의 선택값을 가져와야 하는 경우가 있습니다! 그럴때는 아래와 같이 jquery 를 사용하시면 됩니다! $("input[name='radio_btn']:checked").val(); 참고들 하세요!

[javascript/jquery] kakaomap resize example / 카카오맵 리사이징 방법 카카오 맵을 연동하여 지도를 보여주다보면 팝업 혹은 모달에서 지도가 깨지거나 가려져서 안보이는 현상이 종종 발생하곤 합니다! 그럴때는 아래와 같이 relayout 함수를 이용하시면 됩니다! var map = new kakao.maps.Map(container, options); 위선 위와 같이 만들어진 지도 객체 map 이 있다고 가정하고, 지도가 로드된 후에 아래와 같이 함수를 호출해주시면 됩니다! map.relayout(); 저는 정상적으로 동작시키기 위해서 0.5초 정도의 timeout 을 주고 구현했습니다! 참고들 하세요!

[javascript/jquery] javascript opener reload example / 자바스크립트 부모창 새로고침 하는 방법 javascript 에서 팝업을 이용해 특정 액션을 처리하고 나서 부모창을 새로고침 해야하는 경우가 있습니다. 그럴때는 아래와 같이 opener 를 이용하시면 됩니다! opener.location.reload(); 추가적으로, 부모창을 새로고침하고 현재 팝업을 닫으려면 아래와 같이 하시면 됩니다! opener.location.reload(); window.close(); 참고들 하세요!