input 글자수 입력 후 다음 칸에 focus

input maxlength 값 만큼 입력 후 다음 input에 자동으로 focusing 된다. 카드번호 입력, 비밀번호 1글자씩 입력 등에 사용된다. 카드번호 취소 취소 취소 취소 유효기간 취소 $(".section__joincard .form__item-input.flex input").keyup (function () { var charLimit = $(this).attr("maxlength"); if (this.value.length >= charLimit) { $(this).parent().next().find('input').focus(); return false; } });

2022.12.23

모바일 디바이스 체크

모바일 디바이스를 체크하여 PC웹 환경인지, mobile 환경인지 알아낼 수 있다. 이 코드를 활용해 모바일용, 또는 PC화면용 동작을 다르게 할 수 있다. function detectMobileDevice(agent) { const mobileRegex = [/Android/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i] return mobileRegex.some(mobile => agent.match(mobile)) } const isMobile = detectMobileDevice(window.navigator.userAgent) if(isMobile){ // 모바일 } else { // PC }

2022.12.12

google webFont loader

google web font loader CSS가 로드되기 전에 폰트가 로드되길 원하고, 스타일되지 않은 텍스트가 번쩍거리지 않게 하려면 웹 폰트 로더를 사용하라. 웹 폰트 로더는 사이트가 로드되기 전에 로드되고, 스타일되지 않은 텍스트가 번쩍이는 것을 확실하게 방지한다. 비동기 스크립트도 사용할 수 있지만, 폰트가 먼저 로드되는 것을 확실하게 하기 위해 동기 스크립트를 사용하는 것이 좋다. 사용하기 Web Font Loader 라이브러리를 사용하려면 페이지에 포함하고 로드할 글꼴을 지정하기만 하면 된다. Web Font Loader는 jsDelivr 및 CDNJS CDN에서도 사용할 수 있다. https://www.jsdelivr.com/package/npm/webfontloader https://gi..

2022.12.07

모바일 환경에서의 vh

문제인식 프로젝트 진행 중 전체화면을 만들기 위해 100vh를 사용했다. PC환경에서 테스트 할 때에는 문제가 없었지만, 실제 모바일 기기에서 브라우저로 접속 후 확인했더니 세로 스크롤이 생기는 버그가 있었다. vh는 viewport height에 해당하는 단위로, 해당 브라우저의 높이에 따라 상대적으로 적용되는 단위다. 예를 들어, 화면의 높이가 100px이라면 1vh는 1px이 된다. 원인 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간(이 영역은 스크롤 방향에 따라 가변적)을 포함하기 때문이었다. 모바일 브라우저에서 100vh는 하단 URL을 입력하는 공간을 포함한다. URL바는 상황에 따라 보여지거나 없어지는 경우가 있는데, 100vh는 그에 따라 다시 측정되지 않는다. 해결 모바일 ..

2022.11.17

async await promise

function sayHi(){ console.log("start"); } async function a(){ let promise = new Promise((resolve, reject) => { setTimeout(() => resolve(sayHi()), 3000) }); let result = await promise; console.log("end"); } a(); a함수를 실행하면 3초 뒤 sayHi가 실행 되고, 그 아랫줄이 순차적으로 실행된다. console창에 start가 먼저 찍히고, end가 나중에 찍힘

2022.09.30

아이폰 카메라, 공유하기 버튼

카메라 🎥 비디오 스트림에 액세스할 수 없습니다. (웹캠이 활성화되어 있는지 확인하십시오). 잘못된 QR코드입니다. Data: // var video = document.createElement("video"); var video = document.getElementById("video"); // $("#wrap").append(video); // console.log('1', video); var canvasElement = document.getElementById("canvas"); var canvas = canvasElement.getContext("2d"); var loadingMessage = document.getElementById("loadingMessage"); var outputCo..

2022.09.29