반응형 Javascript8 Javascript 함수 모음 1. onlyNumber(className) /** * 클래스 명 입력하여 지정가능 */ function onlyNumber(className = 'onlyNumber'){ className = '.' + classname; const onlyNumberEl = document.querySelectorAll(className); onlyNumberEl.forEach(function(el, idx){ el.addEventListener('keydown', function(keyboardEvent){ // 상단 숫자 0 ~ 9 if(keyboardEvent.which >= 48 && keyboardEvent.which = 96 && keyboardEvent.which 2023. 8. 29. 카드번호 마스킹 처리 html, js 예제 2023.08.24 : 카드번호 위치 및 마스킹 표시 문자, 하이픈 표시여부, 하이픈 사용시 하이픈 위치 지정 설정 추가 2023.08.29 : 설정에 따라 다른 처리되는 것을 확인하기 위한 코드로 변경 카드번호 마스킹 처리 예제 코드 - html 카드번호 마스킹 번호 길이[최소, 최대] 마스킹 시작자리 마스킹 처리길이 실제 처리할 데이터 구분 마스크 처리 후 마스크 처리 전 하이픈(-) 사용여부 사용 사용안함 사용자가 입력하고 마스킹 처리되는 입력란 사용자가 입력한 번호 그대로 가지고 있는 입력란 실제로 백단으로 보낼 입력란 - javascript function onlyNumber(className = 'onlyNumber'){ className = "." + className; let onlyNum.. 2023. 7. 11. pointer 이벤트를 통한 스크롤 처리 let sliderList = document.querySelectorAll('.pointer-scroll'); sliderList.forEach(function(item) { let x; let y; let flag = false; item.onpointerdown = function(event){ event.preventDefault(); x = event.clientX; y = event.clientY; flag = true; } item. onpointermove = function(event){ if(flag){ item.scrollLeft += (-1 * (event.clientX - x)); item.scrollTop += (-1 * (event.clientY - y)); x = event... 2023. 6. 30. 가볍게 table 을 select 처럼 사용해보자. 플러그인을 사용하지 않고 jquery 로만 테이블을 select 처럼 선택해서 이용할 수 있도록 하는 스크립트 와 같은 형식으로 보여주고 진행한다. 1. table에서 라인 하나 클릭 시 이벤트가 동작할 수 있도록 스크립트 셀렉터 지정 2. 해당 라인을 클릭해서 선택했다는 표시가 될 수 있도록 클래스 정리 3. 해당 라인의 속성에 데이터 값으로 선택 값을 지정하고, 클릭하면 그 값을 가져오도록 지정 4. 폼 전송 시 데이터 전송이 가능하도록 테이블 속성에 인풋 명을 지정. 5. 인풋 명에 해당하는 인풋이 없으면 인풋을 만들고, 있으면 인풋에 값을 저장. $(document).on('click', '.select-table > tbody > tr', function(){ /* * * * * * * * * .. 2021. 7. 28. sprintf php to javascript 출처 : https://github.com/locutusjs/locutus/blob/master/src/php/strings/sprintf.js /** * @reference https://github.com/locutusjs/locutus/blob/master/src/php/strings/sprintf.js */ function sprintf() { // discuss at: https://locutus.io/php/sprintf/ // original by: Ash Searle (https://hexmen.com/blog/) // improved by: Michael White (https://getsprink.com) // improved by: Jack // improved by: Kevin va.. 2020. 11. 3. [Javascript] Image Responsive Map Plugin HTML 코딩에서 Image 특정 위치에 특별한 이벤트를 주려고 하는 경우 Map 태그를 많이 이용합니다. 다만 Map 의 경우 coord값으로 위치를 확인하는데 image에서의 좌표값이 고정이므로 반응형 홈페이지에서 이미지 크기가 유동적으로 변할 경우에 문제가 됩니다. 그렇다 보니 Image Map 좌표 값을 처리해주는 Plugin을 만들어 사용하게 되었는데, 많이 이용했던 플러그인으로는 jQuery-rwdImageMaps 가 있습니다. https://github.com/stowball/jQuery-rwdImageMaps 다만 이 플러그인은 약 4년전이 마지막으로 업데이트가 이루어진 플러그인이라 현 최신 브라우저에서는 작동하다가 정상적으로 작동하지 않는 경우가 발생하기도합니다. 아니면 동작하다가 어느날.. 2020. 9. 2. « 1 2 » 반응형
