이미지 업로드를 하다보면, 이미지를 자르는 UI를 접할 수 있다.몇 가지 라이브러리가 있는데 이 중 Cropper.js 가 많이 알려져 있다.레거시 jQuery 와 같은 방식으로는 1.62 버전 까지 사용 가능한 것 으로 보인다 https://github.com/fengyuanchen/cropperjs/tree/v1.6.2 GitHub - fengyuanchen/cropperjs: JavaScript image cropper.JavaScript image cropper. Contribute to fengyuanchen/cropperjs development by creating an account on GitHub.github.com1. 예제코드 이미지 자르기 & 업로드 ..

특정 영역을 클립보드에 복사하는 함수이며흔한 함수이지만, 레거시 브라우저와 최신 브라우저 api 에 대한 부분을 고려하였다.1. 메인 함수 - 이 함수만 추출하여 공통함수로 사용하면 된다. /** * 대상 요소 텍스트 클립보드 복사 * 주요 특징: * 1. WinForms(IE), Android WebView, iOS Safari, Modern Browser 호환 * 2. display: none 요소 텍스트 추출 지원 * 3. 스크롤 튐 및 키보드 돌출 방지 * 4. 매개변수 오버로딩 지원 (String 메시지 또는 Callback 함수) * @param {string|HTMLElement} ta..

유튜브의 댓글이 많은곳에 로딩 지연이 걸리면, 뭔가 숨김처리를 하고 있다가 나타나는 모양세를 볼 수 있다.이는 React의 ShadcnUI 에서 경험을 하였는데 이를 jQuery 형태로 흉내 내어 구현해 보았다.아래 2개의 파일을 다운받아 로컬에서 실행해보면 이해가 더 쉽다.예제를 들어보자면 로딩 때 모습 (실제로 애니메이션 효과 있음) 로딩 완료 후 실제 컨텐츠 ShadcnUI 의 스켈레톤 https://ui.shadcn.com/docs/components/skeleton SkeletonUse to show a placeholder while content is loading.ui.shadcn.com JS 와 예제를 분리 하였다.1. jQuery 형태의 스켈레톤 로더 (function ($) { ..

비밀번호 입력창에서 CapsLock 이 켜졌는지 여부를 알려주는 기능들이 있다.이를 자바스크립트로 구현 하였다.사용법 - 아래의 함수를 공용함수든 어딘가에 구현하고 페이지가 로딩될때 실행하면 된다. - initCapsLockWarning 의 첫번째 매개변수는 선택자이다. 즉 을 지정한다. 그리고 다중 선택자를 지원한다., 두밴째 매개변수는 "CapsLock 이 켜졌습니다" 메시지를 표시할 부분이다. 이련 형태이다.$(function () { initCapsLockWarning('#up1, #up2', '#capslock-warning'); // 이건 보너스 비밀번호와 비밀번호 확인이 일치하는지 여부인데 필요없음 이 구문은 지우고 쓰자 $('#up1, #up2').on..

요즘 로그인폼을 보면 대체적으로 눈알아이콘이 들아가 있고눈알 아이콘 클릭 시 패스워드를 보여주도록 하는 기능들이 있다. 이를 자바스크립트 함수를 통해 구현하였다.일반적으로 이미지, CSS가 밖에 모두 나와있어야 하는데 스크립트 함수안에 모두 넣었다.사용법은 아래 코드의 모든 스크립트를 로그인 페이지에 통으로 붙여넣고아래 부분에 비밀번호 부분의 ID 또는 선택자로 변경하면 된다.관점에 따라 눈알아이콘을 서로 변경하고 싶으면 함수내 소스코드 const eyeOpenSvg 와 const eyeClosedSvg 변수이름을 서로 변경하면 된다. 물론 내용은 그대로 둔다./*** @description 비밀번호 보이기/숨기기 기능을 초기화하는 함수.* @param {string} targetInputSelector..

온라인 쇼핑을 하다보면 사용자의 경험에 집중하기 위해긴 이미지로 떡 도배되어 만들어진 상품 내용의 일부분만 보여주고[더보기] 버튼을 눌렀을 때 사용 리스트 전채를 보여주는 모습들을 볼 수 있다.이를 html과 jQuery 형태로 구현하였다. 요기다 긴 이미지나 글을 섞어서 넣자 위 영역에 세로로 긴 이미지를 넣게 되면 더보기 효과를 사용할 수 있다.html css jquery 코드를 가져다가 응용해서 사용해 보자. 첫 번째 제품 상세정보 이곳에는 제품에 대한 설명 텍스트가 들어갑니다. 처음에는 이 영역의 일부만 보입니다. 이미지 아래에도 추가 설명을 넣을 수 있습니다. ..

쇼핑몰등에서 마우스 그래그를 하다보면 상품이 계속 생겨나는 것을 볼 수 있다.이를 무한스크롤이라 하는데 일종의 페이징이다.- 아래 소스코드를 JSFIDDLE 에서 돌려보자 HTML 영역에 모두 집어넣고 RUN 시키면 동작한다. 심지어 가짜JSON API까지 사용하여 상품이 있는 것 처럼 테스트 가능하다 상품 목록 (0/0) Loading... 우선 위 코드는 이해하는것 보다 복사해서 쓰려고 만들어 둔 것이다.1., HTML 내 이 부분을 자신의 영역에 복사한다 Loading... 2. 그, 다음 스크립트 코드를 모두 복사한다...

jQuery로 작성된 바이트 체크 샘플SMS 발송 관련 페이지에서 주로 사용된다.소스코드의 자바스크립트 영역에서 2가지 방식을 지정해서 사용하면 된다.1. const MAX_BYTES = 100; - 허용가능한 최대 byte 수 2. const useUtf8Calculation = true; - UTF8 형태로 byte를 계산할지 여부 (영문2, 한글3, 이모지4) 3. const textInput = $('#text-input'); - 입력 영역 지정 (textarea 를 지정한다. 이 부분은 키입력 이벤트와 이모지 등에서 사용된다) 실시간 바이트 체크 ..