[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) {
alert("카드번호는 숫자만 입력할 수 있습니다.");
num.value = "";
return 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"/>&nbsp;-&nbsp;

<input type="text" class="moveNumber" onKeyup="inputMoveNumber(this);" maxlength="4"/>&nbsp;-&nbsp;

<input type="text" class="moveNumber" onKeyup="inputMoveNumber(this);" maxlength="4"/>&nbsp;-&nbsp;

<input type="text" class="moveNumber" maxlength="4"/>

</body>

</html>




# 출력결과










■ 카드 유효기간(MM/YY) 입력폼




다음은 MM/YY형태의 카드 유효기간을 입력하는 입력폼이다.

기본적으로 MM/YY형태의 숫자 4자리를 입력하면 자동으로 슬래시( / )기호가 삽입되게끔 제작되었다.




<html>
<head>
<title>:: 카드 유효기간 체크 ::</title>
<style type="text/css">
    .validThru {
        text-align:center;
        width:60px;
    }
</style>
<script type="text/javascript">
    function inputValidThru(period) {

        // replace 함수를 사용하여 슬래시( / )을 공백으로 치환한다.
        var replaceCard = period.value.replace(/\//g, "");

        // 텍스트박스의 입력값이 4~5글자 사이가 되는 경우에만 실행한다.
        if(replaceCard.length >= 4 && replaceCard.length < 5) {

            var inputMonth = replaceCard.substring(0, 2);    // 선언한 변수 month에 월의 정보값을 담는다.
            var inputYear = replaceCard.substring(2, 4);       // 선언한 변수 year에 년의 정보값을 담는다.


            // 현재 날짜 값을 구한다.

            var nowDate = new Date();

            var nowMonth = autoLeftPad(nowDate.getMonth() + 1, 2);

            var nowYear = autoLeftPad(nowDate.getFullYear().toString().substr(2, 2), 2);


            // isFinite함수를 사용하여 문자가 선언되었는지 확인한다.
            if(isFinite(inputMonth + inputYear) == false) {
                alert("문자는 입력하실 수 없습니다.");
                period.value = autoLeftPad((Number(nowMonth) + 1), 2) + "/" + nowYear;
                return false;
            }

            // 입력한 월이 12월 보다 큰 경우
            if(inputMonth > 12) {
                alert("12월보다 큰 월수는 입력하실 수 없습니다. ");
                period.value = "12/" + inputYear;
                return false;
            }


            // 입력한 유효기간을 현재날짜와 비교하여 사용 가능 여부를 판단한다.
            if((inputYear + inputMonth) <= (nowYear + nowMonth)) {
                alert("유효기간이 만료된 카드는 사용하실 수 없습니다.");
                period.value = inputMonth + "/" + autoLeftPad((Number(nowYear) + 1), 2);
                return false;
            }

            period.value = inputMonth + "/" + inputYear;
        }
    }


    // 1자리 문자열의 경우 앞자리에 숫자 0을 자동으로 채워 00형태로 출력하기위한 함수
    function autoLeftPad(num, digit) {
        if(String(num).length < digit) {
            num = new Array(digit - String(num).length + 1).join('0') + num;
        }
        return num;
    }
</script>
</head>
<body>
    <h2>카드 유효기간</h2>
    <!-- maxlength의 값을 5로지정하여 다섯자리 이상의 값이 등록되는것을 막는다. -->
    <input type="text" class="validThru" onKeyup="inputValidThru(this);" placeholder="MM/YY" maxlength="5"/>
</body>
</html>



# 출력결과




# 예외처리





반응형
//

[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;"/>

&nbsp;&nbsp;

<input type="button" onClick="rowMoveEvent('down');" value="▼" style="width:50px;"/>

</td>

</tr>

</tfoot>

</table>

</body>

</html> 




# 출력결과





반응형
//

[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>
<head>
<title>:: AJAX 파일전송 ::</title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function ajaxFileUpload() {

        var form = jQuery("#ajaxFrom")[0];
        var formData = new FormData(form);
        formData.append("message", "ajax로 파일 전송하기");
        formData.append("file", jQuery("#ajaxFile")[0].files[0]);

        jQuery.ajax({
              url : "./ajaxFormReceive.php"
            , type : "POST"
            , processData : false
            , contentType : false
            , data : formData
            , success:function(json) {
                var obj = JSON.parse(json);
            }
        });
    }
</script>
</head>
<body>
<form enctype="multipart/form-data" id="ajaxFrom" method="post">
    <input type="file" id="ajaxFile"/>
    <input type="button" onClick="ajaxFileUpload();" value="업로드"/>
</form>
</body>
</html>

form 태그의 enctype="multipart/form" 사용하지 않아도 된다.




# 소스코드02 - 업로드하여 전송된 파일의 속성값을 출력하는 소스코드

 ajaxFormReceive.php

<?php
    echo "### POST ###";
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";

    echo "### FILE ###";
    echo "<pre>";
    print_r($_FILES);
    echo "</pre>";
?>




# 출력결과01 - 업로드할 파일을 선택한뒤 파일을 전송한다.




# 출력결과02 - 사용하는 브라우저의 개발자 도구를 활용하여 출력된 결과를 확인해 보자.




위와같이 ajax를 사용하여 파일을 전송이 가능한 것을 확인 할 수 있다.


필자가 이렇게 AJAX로 파일을 전송하게 된 이유는.


주로 UI / UX 적인 디자인적 이슈가 많은 편인데.


그러한 이유는 아래 링크된 페이지의 포스트를 통해 확인할 수 있다.




#참고01 : input type='file' 없이 파일 전송하기

#참고02 : AJAX로 파일 업로드하고 썸네일 이미지 받아오기




반응형
//

[jQuery] 쇼핑몰 대표 이미지 상품박스[jQuery] 쇼핑몰 대표 이미지 상품박스

Posted at 2018. 3. 14. 09:34 | Posted in JavaScript & jQuery/jQuery
반응형




■ onMouseover를 통한 이미지 변경




# 소스코드

<html>
<title>:: 상품박스 ::</title>
<head>
<style type="text/css">
    .represent {
        border:1px solid #FF0000;
        width:460px;
        overflow:auto;
    }

    ul {
        list-style:outside none none;
        margin:0;
        padding:0;
    }

    li {
        margin:0 0 0 0;
        padding:0 0 0 0;
        border:0;
        float:left;
        width:20%;
    }

    img {
        width:100%;
    }
</style>
</head>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
function changeRepresentImage(num) {
    var link = jQuery(".imgServe").eq(num).attr("src");
    jQuery("#imgRepresent").attr("src", link);
}
</script>
<body>
    <div class="represent">
        <img id="imgRepresent" src="./image/Box_01.png" style="width:460px;height:460px;"/>
        <ul>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('0');">
                    <img class="imgServe" src="./image/Box_01.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('1');">
                    <img class="imgServe" src="./image/Box_02.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('2');">
                    <img class="imgServe" src="./image/Box_03.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('3');">
                    <img class="imgServe" src="./image/Box_04.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('4');">
                    <img class="imgServe" src="./image/Box_05.png"/>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>



# 출력결과




인터넷 쇼핑몰등에서는 위와같이 상품의 대표이미지를 올려둘 수 있는 사이트들이 많이 있다.


이렇게 상품 이미지를 올리는것은


<input type="file"/>을 사용하는 것이 쉬울 수 있겠지만,


좀더 세련된 UI를 사용해 보기위해 아래와같은 방식을 취해 보려고 한다.







■ AJAX로 파일 업로드 하고 썸네일 이미지 받아오기




# 소스코드 - 이미지 업로드를 실제로 조작하는 thumbnail_upload.php

<html>
<title>:: 업로드 파일 썸네일 생성 ::</title>
<head>
<style type="text/css">
.temporaryFile {
    display:none;
}

.thumbnailImg {
    width:64px;
    height:64px;
    border-radius:10px;
    border:3px solid #CCCCCC;
}
</style>
</head>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
// 이미지를 업로드 할 준비를 시작한다.
function temporaryFileUpload(num) {

    // 이미지파일의 정보를 받을 배열을 선언한다.
    var tmpFile = new Object();
    tmpFile['file'] = new Array();     // tmpFile['file'] 파일의 정보를 담을 변수
    tmpFile['img'] = new Array();    // tmpFile['file'] 이미지의 경로를 담을 변수
    var tmpNum = 0;
    var addPlus = 0;

    // 먼저 업로드 된 파일의 존재 유무를 확인한다.
    if(jQuery(".temporaryFile").eq(num).val()) {

        // 파일이 존재하면 우선 기존 파일을 삭제한 이후에 작업을 진행한다.
        if(confirm("해당 이미지를 삭제 하시겠습니까?") == true) {

            // 먼저 업로드 하지 않을 파일을 제거한다.
            jQuery(".temporaryFile").eq(num).val("");

            // 파일이 제거되면 <input type="file"/>의 수만큼 반복문을 돌린다.
            jQuery(".temporaryFile").each(function(idx) {

                // 반복문을 돌리는 중에 <input type="file"/>의 값이 존재한는 순서로 배열에 담는다.
                if(jQuery(".temporaryFile").eq(idx).val()) {
                    tmpFile['file'][tmpNum] = [jQuery(".temporaryFile").eq(idx).clone()];
                    tmpFile['img'][tmpNum] = jQuery(".thumbnailImg").eq(idx).attr("src");
                    tmpNum++;
                }
            });
          
            // 모든 썸네일 이미지 정보를 초기화 한다.
            jQuery(".temporaryFile").val("");
            jQuery(".thumbnailImg").attr("src", "./plusimg.png");
            jQuery(".thumbnailImg").css("display", "none");
          

            // 배열로 받은 파일의 정보를 for문 or for in문을 사용하여 순서를 재정렬한다.


            /* ① for in 문을 사용한 경우(for in 문을 주석처리 한 이유는 아래에 기술 하였다.)

            for(var key in tmpFile['file']) {
                jQuery(".temporaryFile").eq(key).replaceWith(tmpFile['file'][key][0].clone(true));
                jQuery(".thumbnailImg").eq(key).css("display", "inline");
                jQuery(".thumbnailImg").eq(key).attr("src", tmpFile['img'][key]);
                addPlus++;
            }

            */

           

            /* for 문(ie8 이하 호환)을 사용한 경우 */

            for(var lineUp = 0, item; item=tmpFiles['file'][lineUp]; lineUp++) {
                jQuery(".temporaryFile").eq(lineUp).replaceWith(tmpFiles['file'][addPlus][0].clone(true));
                jQuery(".thumbnailImg").eq(lineUp).css("display", "inline");
                jQuery(".thumbnailImg").eq(lineUp).attr("src", tmpFiles['src'][addPlus]);
                jQuery(".previousFile").eq(lineUp).val(tmpFiles['img'][addPlus]);
                addPlus++;
            }

            if(addPlus < 5) {
                jQuery(".thumbnailImg").eq(addPlus).css("display", "inline");
            }

        } else {
            return false;
        }
    }
  
    // 파일이 존재하지 않다면 업로드를 시작한다.
    else {
        jQuery(".temporaryFile").eq(num).click();
    }
}

// 임시폴더에 파일을 업로드하고 그 경로를 받아온다.
function temporaryFileTransmit(num) {
    var form = jQuery("#uploadFrom")[0];
    var formData = new FormData(form);
    formData.append("mode", "temporaryImageUpload");
    formData.append("tmpFile", jQuery(".temporaryFile").eq(num)[0].files[0]);
  
    // ajax로 파일을 업로드 한다.
    jQuery.ajax({
          url : "./upload_class.php"
        , type : "POST"
        , processData : false
        , contentType : false
        , data : formData
        , success:function(json) {
            var obj = JSON.parse(json);
            if(obj.ret == "succ") {

                // 업로드된 버튼을 임시폴더에 업로드된 경로의 이미지 파일로 교체한다.
                jQuery(".thumbnailImg").eq(num).attr("src", obj.img);

                // 업로드 버튼이 4개 이하인경우 업로드 버튼을 하나 생성한다.
                if(num < 5) {
                    jQuery(".thumbnailImg").eq(++num).css("display", "inline");
                }

            } else {
                alert(obj.message);
                return false;
            }
        }
    });
}
</script>
<body>
<form id="uploadFrom" method="post">
<input type="file" class="temporaryFile" name="thumbnailImg[0]" onChange="temporaryFileTransmit(0);" style="display:none;"/>
<input type="file" class="temporaryFile" name="thumbnailImg[1]" onChange="temporaryFileTransmit(1);" style="display:none;"/>
<input type="file" class="temporaryFile" name="thumbnailImg[2]" onChange="temporaryFileTransmit(2);" style="display:none;"/>
<input type="file" class="temporaryFile" name="thumbnailImg[3]" onChange="temporaryFileTransmit(3);" style="display:none;"/>
<input type="file" class="temporaryFile" name="thumbnailImg[4]" onChange="temporaryFileTransmit(4);" style="display:none;"/>
<h1># 이미지 파일 업로드시 썸네일 생성하기</h1>
<table>
    <tr>
        <th>이미지 업로드 : </th>
        <td>
            <a href="javascript:;" onClick="temporaryFileUpload(0);">
                <img class="thumbnailImg" src="./plusimg.png" style="display:inline;"/>
            </a>
            <a href="javascript:;" onClick="temporaryFileUpload(1);">
                <img class="thumbnailImg" src="./plusimg.png" style="display:none;"/>
            </a>
            <a href="javascript:;" onClick="temporaryFileUpload(2);">
                <img class="thumbnailImg" src="./plusimg.png" style="display:none;"/>
            </a>
            <a href="javascript:;" onClick="temporaryFileUpload(3);">
                <img class="thumbnailImg" src="./plusimg.png" style="display:none;"/>
            </a>
            <a href="javascript:;" onClick="temporaryFileUpload(4);">
                <img class="thumbnailImg" src="./plusimg.png" style="display:none;"/>
            </a>
        </td>
    </tr>
</table>
</form>
</body>
</html> 


※ for in 문을 주석 처리한 이유

 처음에 제작할때는 for in문을 사용했었다.
 그런데 문제가 발생한것이 필자는 평소 다음 오픈 에디터를 주로 사용하는데.
 다음 오픈 에디터와 같은 페이지에서 해당 반복문이 돌아갈 경우 스크립트 충돌이 발생했다.

 (이유는 아직 까지 확인 하지 못했다.)

 그래서 ② for 문(ie8 호환 방식)을 사용하게 되었다

 (위 코드는 그냥 for문을 사용해도 된다. 하지만 다른곳에서 문제가 발생하는 경우가 있었기에 적어둔다.)

 아무튼 다음 오픈 에디터와 같이 사용하는 경우에는 스크립트단에서의 for in 문의 사용은 자제하려 한다.

 



# 소스코드 - 임시 경로에 파일을 업로드 하고 업로드된 이미지를 받아오는 upload_class.php

<?php
// 업로드 폴더 경로
$uploadsDir = "./temporary";

// 업로드 가능한 확장자 지정
$allowedExt = array("jpg", "JPG", "jpeg", "JPEG", "png", "PNG", "gif", "GIF");

switch($_POST['mode']) {

    case "temporaryImageUpload" :

        $fileName = $_FILES['tmpFile']['name'];

        // 파일의 확장자를 분리
        $ext = array_pop(explode(".", $fileName));

        // 업로드 가능한 확장자 인지 확인한다.
        if(!in_array($ext, $allowedExt)) {
            $RetVal['message'] = "허용되지 않는 확장자입니다.";
        } else {

            // 업로드할 파일의 경로
            $tmpFile = $uploadsDir."/".date("YmdHis")."_".$fileName;

            if(move_uploaded_file($_FILES['tmpFile']['tmp_name'], $tmpFile)) {
                $RetVal['img'] = $tmpFile;
                $RetVal['ret'] = "succ";
            } else {
                $RetVal['message'] = "업로드시 문제가 발생하였습니다.\n다시 시도하여 주시기 바랍니다.";
            }
        }

        print json_encode($RetVal);
        return;
    break;

    default :
    break;
}
?>



# 출력결과






반응형
//