Web/JavaScript14 input에 자연수(정수)만 입력받기 1. input에 type을 number로 하고 2. onkeypress 항목을 추가해서 입력된 키가 0~9만 true로 반환하도록 설정한다. 2023. 5. 9. 모바일에서 touch-punch 사용시 클릭 이벤트 안되는 오류 개선 모바일에서 드래그 기능 (draggable)을 사용하려고 touch-punch.js를 사용했는데, ⭐ 드래그 기능과 클릭 이벤트(onclick)를 동시에 사용할때는 드래그만 되고 클릭 이벤트는 잘 되지 않는 문제가 생겼다. 검색해보다가 개선된 touch-punch.js를 발견했다! 이 touch-punch.js를 사용하면 움직임 수치를 통해 클릭이벤트로 감지하도록 처리할 수 있다. 드래그/터치 충돌을 개선한 touch-punch👇 https://github.com/RWAP/jquery-ui-touch-punch GitHub - RWAP/jquery-ui-touch-punch: A duck punch for adding touch events to jQuery UI A duck punch for addin.. 2022. 10. 19. 파라미터에 기호 (#,& 등등) 처리 url에 파라미터를 추가할때 파라미터 값에 #과 같은 기호가 들어가면 데이터가 짤려서 넘어가는 경우가 있다. var frameStr = ''; $("#resultDetailFrame").append(frameStr); 다음의 경우 userId에 'user#123' 데이터가 아이디 안에 # 때문에 user만 인식되어 오류가 났었다. 이런 경우 encodeURIComponent 를 사용하여 기호 #을 인코딩한 후 넘기니 정상 처리 되었다! var frameStr = ''; $("#resultDetailFrame").append(frameStr); userId -> encodeURIComponent(userId) user#123 -> user%23123 참고 페이지 👇 https://opentutorials... 2022. 6. 28. jquery - draggable 화면 요소를 드래그할 수 있는 draggable 기능은 jquery-ui.js를 사용하면 간단하게 쓸 수 있다! 1. 우선 jquery.js와 jquery-ui.js가 필요하다. 2. 그리고 script에 드래그할 요소를 선언하고 draggable을 써주면 끝! 3. 추가 작업이 필요하다면 옵션과 이벤트 이용하기 draggable도 다음처럼 여러 옵션과 이벤트가 있는데, 그 중 몇개만 소개해 보겠다. ⭐ 옵션 옵션 설명 예시 handle 드래그 handle : '#toolWrapHandle' // #toolWrapHandle 요소를 이용해서 드래그 가능 containment 드래그 이동이 가능한 이동 범위 지정 containment : '.container' // .container 요소 범위에서만 이동.. 2022. 6. 10. Jquery - Set 객체 id를 여러개 담을 배열같은 데이터형이 필요한데 id라 중복 없이 저장하고 싶어서 Java의 HashSet 같은 자료형이 있나 찾아보게 되었다. jquery에는 set객체가 있어 set을 사용했다. set은 add 메소드로 요소를 추가하는데, 같은 요소를 여러번 add 해도 한번만 들어가고 중복되지 않는다. ⭐Set 객체 생성 var idSet = new Set(); ⭐ 요소 추가 idSet.add("추가할 아이디"); ⭐ 요소 삭제 idSet.delete("삭제할 아이디"); ⭐ 요소 개수 조회 idSet.size ⭐ 초기화 idSet.clear(); 예시 👇 1. Set 객체 생성 2. 요소 추가 및 삭제 id1, id2, id3를 넣고 id3를 삭제했다. id1, id2만 남음 (id1은 한번 더 .. 2022. 1. 28. jquery html2canvas - 웹페이지 스크린샷 html2canvas를 이용하면 웹페이지를 캡쳐할 수 있다. body 전체 아니더라도 선택자로 일부분만을 캡쳐할 수도 있다. function downloadCanvas(){ html2canvas(document.getElementById("캡쳐할 요소의 id"), {scale: 1, scrollY:-window.scrollY}).then(function(canvas){ var el = document.getElementById("downbtn"); el.href = canvas.toDataURL("image/png"); el.download = "image_name.png"; el.click(); $("#downbtn").attr("href","javascript:downloadCanvas();"); }.. 2022. 1. 7. 이전 1 2 3 다음
