[JavaScript] 카드번호 입력폼 예제[JavaScript] 카드번호 입력폼 예제
Posted at 2018. 4. 18. 10:05 | Posted in JavaScript & jQuery/JavaScript■ 16자리(4x4) 카드번호 입력폼
아래 예제는 텍스트 박스 입력시 maxlength에 지정된 숫자를 체크하고 그 갯수만큼의 문자열이 채워지면
nextElementSibling.focus()를 통해 자동으로 다음 텍스트 박스로 이동하게 된다.
# 소스코드
<html> <head> <title>:: 숫자 다음 TEXT 이동 ::</title> <style type="text/css"> .moveNumber { text-align:center; width:40px; }; </style> <script type="text/javascript"> function inputMoveNumber(num) { if(isFinite(num.value) == false) { max = num.getAttribute("maxlength"); if(num.value.length >= max) { num.nextElementSibling.focus(); } } </script> </head> <body> <h2>카드 번호</h2> <input type="text" class="moveNumber" onKeyup="inputMoveNumber(this);" maxlength="4"/> - <input type="text" class="moveNumber" onKeyup="inputMoveNumber(this);" maxlength="4"/> - <input type="text" class="moveNumber" onKeyup="inputMoveNumber(this);" maxlength="4"/> - <input type="text" class="moveNumber" maxlength="4"/> </body> </html> |
# 출력결과
■ 카드 유효기간(MM/YY) 입력폼
다음은 MM/YY형태의 카드 유효기간을 입력하는 입력폼이다.
기본적으로 MM/YY형태의 숫자 4자리를 입력하면 자동으로 슬래시( / )기호가 삽입되게끔 제작되었다.
<html> // 현재 날짜 값을 구한다. var nowDate = new Date(); var nowMonth = autoLeftPad(nowDate.getMonth() + 1, 2); var nowYear = autoLeftPad(nowDate.getFullYear().toString().substr(2, 2), 2);
// 입력한 유효기간을 현재날짜와 비교하여 사용 가능 여부를 판단한다. // 1자리 문자열의 경우 앞자리에 숫자 0을 자동으로 채워 00형태로 출력하기위한 함수 |
# 출력결과
# 예외처리
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
[JavaScript] Session 데이터 읽고, 쓰기 (0) | 2018.09.04 |
---|---|
[JavaScript] Cookie 생성, 삭제 및 읽어오기 (4) | 2018.09.03 |
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입 (7) | 2018.08.21 |
[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입 (0) | 2018.08.20 |
[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스 (3) | 2018.08.17 |
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기
Posted at 2018. 3. 22. 14:01 | Posted in JavaScript & jQuery/jQuery참고 : http://ktsmemo.cafe24.com/s/jQueryTip/64
■ 테이블 행(ROW) 위치 이동시키기
# 소스코드
<html> <head> <title>:: 테이블 행(ROW) 위치 이동하기 ::</title> <script src="http://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript"> function checkeRowColorChange(obj) {
// 체크된 라디오 박스의 행(row)에 강조색깔로 바꾸기 전 모든 행(row)의 백그라운드를 흰색으로 변경한다. jQuery("#girlTbody > tr").css("background-color", "#FFFFFF"); // 체크된 라디오 박스의 행이 몇번째에 위치하는지 파악한다. var row = jQuery(".chkRadio").index(obj); // 체크된 라디오 박스의 행(row)의 색깔을 변경한다. jQuery("#girlTbody > tr").eq(row).css("background-color", "#FAF4C0"); } function rowMoveEvent(direction) {
// 체크된 행(row)의 존재 여부를 파악한다. if(jQuery(".chkRadio:checked").val()) { // 체크된 라디오 박스의 행(row)을 변수에 담는다. var row = jQuery(".chkRadio:checked").parent().parent(); // 체크된 행(row)의 이동 한계점을 파악하기 위해 인덱스를 파악한다. var num = row.index(); // 전체 행의 개수를 구한다. var max = (jQuery(".chkRadio").length - 1); // index는 0부터 시작하기에 -1을 해준다. if(direction == "up") { if(num == 0) { // 체크된 행(row)의 위치가 최상단에 위치해 있을경우 더이상 올라갈 수 없게 막는다. alert("첫번째로 지정되어 있습니다.\n더이상 순서를 변경할 수 없습니다."); return false; } else { // 체크된 행(row)을 한칸 위로 올린다. row.prev().before(row); } } else if(direction == "down") { if(num >= max) { // 체크된 행(row)의 위치가 최하단에 위치해 있을경우 더이상 내려갈 수 없게 막는다. alert("마지막으로 지정되어 있습니다.\n더이상 순서를 변경할 수 없습니다."); return false; } else { // 체크된 행(row)을 한칸 아래로 내린다. row.next().after(row); } } } else { alert("선택된 행이 존재하지 않습니다\n위치를 이동시킬 행을 하나 선택해 주세요."); } } </script> </head> <body> <table border="1" cellspacing="0"> <thead style="background-color:#000080;font-weight:bold;color:#FFFFFF;"> <tr> <th style="width:30px;"></th> <th style="width:100px;">:: 가수 ::</th> <th style="width:300px;">:: 노래 제목 ::</th> <th style="width:100px;">:: 발매일 ::</th> </tr> </thead> <tbody id="girlTbody" style="text-align:center;"> <tr> <td><input type="radio" class="chkRadio" name="chkRadio" onClick="checkeRowColorChange(this);"></td> <td>트와이스</td> <td style="text-align:left;">하트 쉐이커(Heart Shaker)</td> <td>2017-12-11</td> </tr> <tr> <td><input type="radio" class="chkRadio" name="chkRadio" onClick="checkeRowColorChange(this);"></td> <td>레드벨벳</td> <td style="text-align:left;">빨간 맛(Red Flavor)</td> <td>2017-07-09</td> </tr> <tr> <td><input type="radio" class="chkRadio" name="chkRadio" onClick="checkeRowColorChange(this);"></td> <td>러블리즈</td> <td style="text-align:left;">종소리(Twinkle)</td> <td>2017-11-14</td> </tr> <tr> <td><input type="radio" class="chkRadio" name="chkRadio" onClick="checkeRowColorChange(this);"></td> <td>모모랜드</td> <td style="text-align:left;">뿜뿜(BBoomBBoom)</td> <td>2018-01-03</td> </tr> <tr> <td><input type="radio" class="chkRadio" name="chkRadio" onClick="checkeRowColorChange(this);"></td> <td>여자친구</td> <td style="text-align:left;">귀를 기울이면(Love Whisper)</td> <td>2017-08-01</td> </tr> </tbody> <tfoot style="background-color:#A9A9A9;"> <tr> <td colspan="4" style="text-align:center;"> <input type="button" onClick="rowMoveEvent('up');" value="▲" style="width:50px;"/> <input type="button" onClick="rowMoveEvent('down');" value="▼" style="width:50px;"/> </td> </tr> </tfoot> </table> </body> </html> |
# 출력결과
'JavaScript & jQuery > jQuery' 카테고리의 다른 글
[jQuery] 따라다니는플로팅 배너 제작 (0) | 2018.04.23 |
---|---|
[jQuery] 선택 날짜를 태그로 생성하는 모듈 (0) | 2018.04.19 |
[jQuery] AJAX를 사용한 파일 업로드 (1) | 2018.03.18 |
[jQuery] 쇼핑몰 대표 이미지 상품박스 (0) | 2018.03.14 |
[jQuery] 이미지 슬라이드 제작 (0) | 2018.03.10 |
[jQuery] AJAX를 사용한 파일 업로드[jQuery] AJAX를 사용한 파일 업로드
Posted at 2018. 3. 18. 21:18 | Posted in JavaScript & jQuery/jQuery참고 : http://b1ix.net/213
■ AJAX를 사용하여 파일 업로드 하기
-. 웹 페이지를 제작하는 과정에서 파일을 업로드시 페이지를 새로고침 하지 않고 등록해야 하는 경우가 종종 발생한다.
그러한 경우에 AJAX를 사용하여 파일을 손쉽게 올려보도록 하자.
-. AJAX로 파일을 업로드 시에 업로드 된 파일 데이터를 넘겨주기 위해서는 아래 사항을 꼭 설정해야 한다.
① 폼(form)의 값이 AJAX를 통해서 넘어가기 때문에 from에 enctype="multipart/form-data"를 꼭 필요로 하지 않는다.
② FormData : 해당 폼의 모든 값들(file포함)을 해당 객체에 한번에 담아 보내기 위해 사용된다. (※ ie10부터 사용가능)
③ processData
-. 기본 값은 true이다.
-. 해당 값이 true일때는 data 값들이 쿼리스트링 형태인 key1=value1&key2=value2 형태로 전달된다.
-. 하지만 이렇게 하면 file 값들은 제대로 전달되지 못한다.
-. 그래서 해당 값을 false로 해주어 { key1 : 'value1', key2 : 'value2' } 형태로 전달해 주어야 file 값들이 제대로 전달된다.
④ contentTyp
-. 기본값은 'application/x-www-form-urlencoded'이다. 해당 기본 타입으로는 파일이 전송 안되기 때문에 false로 해주어야 한다.
# 소스코드01 - 파일을 업로드하는 소스코드
ajaxFormUpload.php |
<html> |
※ form 태그의 enctype="multipart/form" 사용하지 않아도 된다.
# 소스코드02 - 업로드하여 전송된 파일의 속성값을 출력하는 소스코드
ajaxFormReceive.php |
<?php |
# 출력결과01 - 업로드할 파일을 선택한뒤 파일을 전송한다.
# 출력결과02 - 사용하는 브라우저의 개발자 도구를 활용하여 출력된 결과를 확인해 보자.
위와같이 ajax를 사용하여 파일을 전송이 가능한 것을 확인 할 수 있다.
필자가 이렇게 AJAX로 파일을 전송하게 된 이유는.
주로 UI / UX 적인 디자인적 이슈가 많은 편인데.
그러한 이유는 아래 링크된 페이지의 포스트를 통해 확인할 수 있다.
#참고01 : input type='file' 없이 파일 전송하기
#참고02 : AJAX로 파일 업로드하고 썸네일 이미지 받아오기
'JavaScript & jQuery > jQuery' 카테고리의 다른 글
[jQuery] 따라다니는플로팅 배너 제작 (0) | 2018.04.23 |
---|---|
[jQuery] 선택 날짜를 태그로 생성하는 모듈 (0) | 2018.04.19 |
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기 (2) | 2018.03.22 |
[jQuery] 쇼핑몰 대표 이미지 상품박스 (0) | 2018.03.14 |
[jQuery] 이미지 슬라이드 제작 (0) | 2018.03.10 |
[jQuery] 쇼핑몰 대표 이미지 상품박스[jQuery] 쇼핑몰 대표 이미지 상품박스
Posted at 2018. 3. 14. 09:34 | Posted in JavaScript & jQuery/jQuery■ onMouseover를 통한 이미지 변경
# 소스코드
<html> |
# 출력결과
인터넷 쇼핑몰등에서는 위와같이 상품의 대표이미지를 올려둘 수 있는 사이트들이 많이 있다.
이렇게 상품 이미지를 올리는것은
<input type="file"/>을 사용하는 것이 쉬울 수 있겠지만,
좀더 세련된 UI를 사용해 보기위해 아래와같은 방식을 취해 보려고 한다.
■ AJAX로 파일 업로드 하고 썸네일 이미지 받아오기
# 소스코드 - 이미지 업로드를 실제로 조작하는 thumbnail_upload.php
<html> // 배열로 받은 파일의 정보를 for문 or for in문을 사용하여 순서를 재정렬한다. /* ① for in 문을 사용한 경우(for in 문을 주석처리 한 이유는 아래에 기술 하였다.) for(var key in tmpFile['file']) { */ /* ② for 문(ie8 이하 호환)을 사용한 경우 */ for(var lineUp = 0, item; item=tmpFiles['file'][lineUp]; lineUp++) { if(addPlus < 5) { |
※ for in 문을 주석 처리한 이유
처음에 제작할때는 for in문을 사용했었다.
그런데 문제가 발생한것이 필자는 평소 다음 오픈 에디터를 주로 사용하는데.
다음 오픈 에디터와 같은 페이지에서 해당 반복문이 돌아갈 경우 스크립트 충돌이 발생했다.
(이유는 아직 까지 확인 하지 못했다.)
그래서 ② for 문(ie8 호환 방식)을 사용하게 되었다
(위 코드는 그냥 for문을 사용해도 된다. 하지만 다른곳에서 문제가 발생하는 경우가 있었기에 적어둔다.)
아무튼 다음 오픈 에디터와 같이 사용하는 경우에는 스크립트단에서의 for in 문의 사용은 자제하려 한다.
# 소스코드 - 임시 경로에 파일을 업로드 하고 업로드된 이미지를 받아오는 upload_class.php
<?php |
# 출력결과
'JavaScript & jQuery > jQuery' 카테고리의 다른 글
[jQuery] 따라다니는플로팅 배너 제작 (0) | 2018.04.23 |
---|---|
[jQuery] 선택 날짜를 태그로 생성하는 모듈 (0) | 2018.04.19 |
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기 (2) | 2018.03.22 |
[jQuery] AJAX를 사용한 파일 업로드 (1) | 2018.03.18 |
[jQuery] 이미지 슬라이드 제작 (0) | 2018.03.10 |