[Editer] NAVER 스마트 에디터 세팅[Editer] NAVER 스마트 에디터 세팅

Posted at 2018. 4. 20. 17:40 | Posted in API/NAVER 스마트 에디터
반응형




※ 참고 : 이 포스팅은 SmartEditor Basic을 기준으로 작성되었습니다.




■ 네이버 스마트 에디터 세팅하고 사용하기




01. https://github.com/naver/smarteditor2 사이트에 접속하여 smarteditor2-master.zip 파일을 다운로드 받는다.





02. 다운받은 smarteditor2-master.zip 파일의 압축을 해제한뒤 파일명을 smarteditor로 변경하였다.





03. 생성된 smarteditor 프로젝트에서 board.php 파일을 생성한다.





04. board.php 파일의 소스코드는 아래와 같다.

 board.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Naver :: Smart Editor 2</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function submitContents(elClickedObj) {

    // 에디터의 내용이 textarea에 적용됩니다.
    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
   
    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
    try {

        elClickedObj.form.submit();


    } catch(e) { }
}
</script>
</head>
<body>
<form action="view.php" method="post" accept-charset="utf-8">
&nbsp;<b>제목&nbsp;:</b>&nbsp;<input type="text" id="title" name="title" style="width:680px;"/>
<div style="height:10px;"></div>
<div style="width:750px;">
<?php
    include_once("./workspace/SmartEditor2.html");      // 스마트 에디터를 include 한다.
?>
<div style="height:20px;"></div>
<div align="center">
    <input type="button" value="등록" onClick="submitContents(this);"/>
</div>
</div>
</form>
</body>
</html>




05. 다음으로 workspace폴더로 이동하여  include를 사용하여 가져올 SmartEditor2.html 파일을 수정해야 한다.




06. SmartEditor2.html 파일의 수정사항은 아래와 같다.

 ① 파란색으로 강조되어 있는 부분은 수정한 내용이다.

 ② 빨간색으로 강조되어 있는 부분은 삭제해도 된다.

 SmartEditor2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>네이버 :: Smart Editor 2 &#8482;</title>

<!-- 인클루드를 할 것이기 때문에 HuskyEZCreator.js의 연결경로를 절대경로로 변경한다. -->

<script type="text/javascript" src="http://localhost/smarteditor/workspace/js/service/HuskyEZCreator.js" charset="utf-8"></script>
</head>
<body>
<!--form action="sample/viewer/index.php" method="post"-->
    <textarea name="ir1" id="ir1" rows="10" cols="100" style="width:766px;height:412px;display:none;"></textarea>
    <!--textarea name="ir1" id="ir1" rows="10" cols="100" style="width:100%; height:412px; min-width:610px; display:none;"></textarea-->
    <!--p>
        <input type="button" onclick="pasteHTML();" value="본문에 내용 넣기" />
        <input type="button" onclick="showHTML();" value="본문 내용 가져오기" />
        <input type="button" onclick="submitContents(this);" value="서버로 내용 전송" />
        <input type="button" onclick="setDefaultFont();" value="기본 폰트 지정하기 (궁서_24)" />
    </p-->
<!--/form-->

<script type="text/javascript">
var oEditors = [];

var sLang = "ko_KR";    // 언어 (ko_KR/ en_US/ ja_JP/ zh_CN/ zh_TW), default = ko_KR

// 추가 글꼴 목록
//var aAdditionalFontSet = [["MS UI Gothic", "MS UI Gothic"], ["Comic Sans MS", "Comic Sans MS"],["TEST","TEST"]];

nhn.husky.EZCreator.createInIFrame({
      oAppRef : oEditors
    , elPlaceHolder : "ir1"

    // 인클루드를 할 것이기 때문에 SmartEditor2Skin.html의 연결경로를 절대경로로 변경한다.

    , sSkinURI : "http://localhost/smarteditor/workspace/SmartEditor2Skin.html"
    , htParams : {
          bUseToolbar : true                            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
        , bUseVerticalResizer : true                    // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
        , bUseModeChanger : true                    // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
        // , bSkipXssFilter : true                        // client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
        // , aAdditionalFontList : aAdditionalFontSet    // 추가 글꼴 목록
        , fOnBeforeUnload : function() {
            //alert("완료!");
        }

        , I18N_LOCALE : sLang
    } // boolean
    , fOnAppLoad : function(){
        //예제 코드
        //oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
    }
    , fCreator : "createSEditor2"
});

/*
function pasteHTML() {
    var sHTML = "<span style='color:#FF0000;'>이미지도 같은 방식으로 삽입합니다.<\/span>";
    oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
}
*/

/*
function showHTML() {
    var sHTML = oEditors.getById["ir1"].getIR();
    alert(sHTML);
}
*/

/*
function submitContents(elClickedObj) {
    oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);    // 에디터의 내용이 textarea에 적용됩니다.
   
    // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
   
    try {
        elClickedObj.form.submit();
    } catch(e) {}
}
*/

/*
function setDefaultFont() {
    var sDefaultFont = "궁서";
    var nFontSize = 24;
    oEditors.getById["ir1"].setDefaultFont(sDefaultFont, nFontSize);
}
*/
</script>

</body>
</html>




07. 다음으로 스마트 에디터의 스킨내용이 담겨있는 SmartEditor2Skin.html 파일을 수정한다.




08. SmartEditor2Skin.html 에서 수정할 내용은 화면에 띄워지는 스마트 에디터의 버전 정보를 삭제하는 것 뿐이다.

 SmartEditor2Skin.html


      ~ 기타 코드 생략 ~


<!--Remove End-->
</head>
<body>


<!-- 화면에 버전 정보가 표시되는것을 지운다. -->

<!--span id="rev">Version: 2.9.0.4a256db</span-->

<!-- SE2 Markup Start -->   
<div id="smart_editor2">
    <div id="smart_editor2_content"><a href="#se2_iframe" class="blind">글쓰기영역으로 바로가기</a>


      ~ 기타 코드 생략 ~




09. 마지막으로 smarteditor 폴더로 돌아와서 view.php 파일을 생성한다.




10. view.php 파일의 내용은 아래와 같다.

 view.php

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




11. 이제 board.php 파일을 열고 정상적으로 작동되는지 테스트 해보자.





12. 그럼 아래와 같이 view.php에 작성내용이 정상적으로 나타나면서 작업이 완료 되었다.






반응형
저작자표시
//

[Editor] Daum Open Editor 커스텀 메뉴 버튼 제작[Editor] Daum Open Editor 커스텀 메뉴 버튼 제작

Posted at 2018. 4. 20. 12:43 | Posted in API/DAUM 오픈 에디터
반응형




■ 다음 오픈 에디터 YouTube 영상 삽입 커스텀 버튼 제작




01. 먼저 다음 오픈 에디터 라이브러리중 editor.html 파일을 열고 수정한다.





02. editor.html 소스코드에 YouTube 영상 삽입 메뉴를 추가한다.

 editor.html


      ~ 기타 코드 생략 ~


<li class="tx-list">
    <div unselectable="on" id="tx_image" class="tx-image tx-btn-trans">
        <a href="javascript:;" title="사진" class="tx-text">사진</a>
    </div>
</li>
<li class="tx-list">
    <div unselectable="on" id="tx_file" class="tx-file tx-btn-trans">
        <a href="javascript:;" title="파일" class="tx-text">파일</a>
    </div>
</li>


<!-- YouTube 영상 삽입 커스텀 버튼 시작 -->

<li class="tx-list">
    <div style="height:25px;font-size:11px;margin-top:3px;">
        <a href="javascript:;" onClick="youTubeImplant();" title="YouTube">
            <div style="float:left;display:flex;align-items:center;">
                <img src="./daumEditor/images/icon/editor/youtube-logo.png"/>    <!-- 버튼 이미지 -->
            </div>
            <div style="float:left;display:flex;align-items:center;margin-top:2px;">&nbsp;YouTube</div>
        </a>
    </div>
</li>

<!-- YouTube 영상 삽입 커스텀 버튼 종료 -->


<li class="tx-list">
    <div unselectable="on" id="tx_media" class="tx-media tx-btn-trans">
        <a href="javascript:;" title="외부컨텐츠" class="tx-text">외부컨텐츠</a>
    </div>
</li>


      ~ 기타 코드 생략 ~

※ 사용된 CSS Style들은 삽입한 이미지에 맞추기위해 사용된것이다. 각자 주어진 환경에 맞게 수정해야 할것이다.




03. 그럼 상단 메뉴에 아래와 같이 YouTube 버튼이 추가된 모습을 확인 할 수 있다.





04. 다음으로 다음에디터를 불러올 board.php 파일을 수정한다.






05. board.php 파일에 YouTube 업로드 기능을 수행할 팝업 기능을 가진 자바스크립트 함수를 추가한다.

 board.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Daum 에디터</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<style type="text/css">
    a { text-decoration:none;color:#000000; }
</style>
<script type="text/javascript">
function saveContent() {
    if(jQuery("#title").val() == "") {
        alert("제목을 입력해 주세요.");
        jQuery("#title").focus();
        return;
    }

    Editor.save();
}

// YouTube 영상 업로드 창 팝업
function youTubeImplant() {


    var popUrl = "./daumEditor/pages/trex/youtube.html";
    var popOption = "./daumEditor/pages/trex/youtube.html";
    window.open(popUrl, "", popOption);
}
</script>
</head>
<body>
<form name="tx_editor_form" id="tx_editor_form" action="view.php" method="post" enctype="multipart/form-data" accept-charset="utf-8">
&nbsp;<b>제목&nbsp;:</b>&nbsp;<input type="text" id="title" name="title" style="width:680px;"/>
<div style="height:10px;"></div>
<div style="width:750px;">
<?php
    include_once ("./daumEditor/editor.html");
?>
<div align="right"><input type="button" value="등록" onClick="saveContent();"/></div>
</div>
</form>
</body>
</html> 





06. 마지막으로 YouTube 동영상 업로드 기능을 수행할 youtube.html 파일을 제작한다.

※ 이 포스팅은  multimedia.html 파일을 복사한 youtube.html파일 안의 코드를 수정하는 식을 작업을 진행하였다.




07. youtube.html 파일의 수정결과는 아래와 같다.

 youtube.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Daum 에디터 - YouTube 영상첨부</title>
<script src="../../js/popup.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../css/popup.css" type="text/css"  charset="utf-8"/>
<style type="text/css">
    input,textarea { border:1px solid #000000;vertical-align:middle;font-size:12px;}
    
    /* swf wrapper, set width/height */
    .wrapper { width:458px; }
    .code { width:458px; }
    
    .hidden { display:none;}
    .show { display:auto;}
    .desc{ margin: 15px 27px 5px 25px;padding:10px 8px;text-align:left;font-weight:bold;}
    .desc span{ color:#496ce5; }
    .field { margin:0 auto 10px;background:#ffffff url(../../images/icon/editor/tvpot/body_bg.gif?rev=1.0.1);width:420px;height:239px;}
    .field li{ list-style-type:none;}
    .field .codesubmenu { padding-top:20px;width:350px; margin:0 auto; }
    .codeMenu { margin:0px auto;}
    .codeMenu li { display:inline;margin-right:20px; }
    .inputmenu { margin-top:20px;padding-left:30px; color:#333;font-size:11px;font-family:"돋움",dotum}
    .inputmenu input, .inputmenu textarea{ width:308px; }
    #codeUrl { margin-top:10px;}
    
    .inputmenu .unselected{color:#bbbbbb}
    .inputmenu .unselected input, .inputmenu .unselected textarea{border:1px solid #bbbbbb;}
    
    .point {
        font-weight:normal;
        color:#a7b9ec;
    }
</style>
<script type="text/javascript">
// <![CDATA[
    function initEmbeder() {
        var _opener = PopupUtil.getOpener();
        if(!_opener) {
            alert('잘못된 경로로 접근하셨습니다.');
            return;
        }

        var _embeder = getEmbeder('media');
        window.execEmbed = _embeder.embedHandler;
        
        autoResizeHeight($tx("wrapper"));
    }
    
    // 코드 삽입 완료 후
    function done() {

        var _data = {};
        var str = document.getElementsByName("url")[0].value.trim();

       

        // YouTube URL 주소에서 뒤에서 11자리의 문자열을 잘라낸다.

        youtubeCode = str.substring(str.length - 11);
        _data.url = "https://youtu.be/" + youtubeCode;

        if(typeof(execEmbed) == 'undefined') { // Virtual Function
            return;
        }
        executeAfterDataCheck(_data, function(){
            execEmbed(_data);
            closeWindow();
        });
    }

    function executeAfterDataCheck(data, successHandler) {
        if (data.url || data.code) {
            successHandler();
        } else {
            alert("첨부할 멀티미디어 주소를 바르게 입력해주세요.");
        }
    }


    <!-- 삭제

    function selectType(id){
        var textArea = document.getElementsByName("source")[0];
        var input = document.getElementsByName("url")[0];   
        if ( id == 'codeUrl' ){
            $tx.addClassName($tx('codeSource'), "unselected")
            $tx.removeClassName($tx('codeUrl'), "unselected")
            textArea.value = "";
            textArea.disabled = true;
            input.disabled=false;
            input.focus();
        }else{
            $tx.addClassName($tx('codeUrl'), "unselected")
            $tx.removeClassName($tx('codeSource'), "unselected")
            textArea.disabled = false;
            input.value = "";       
            input.disabled=true;
            textArea.focus();
        }
        autoResizeHeight($tx("wrapper"));
    }

    -->

// ]]>
</script>
</head>

<!-- HTML 폼은 필요없는 부분들을 대부분 잘라내었다. -->

<body onload="initEmbeder()">
<div id="wrapper" class="wrapper">
<div class="header">
    <h1>YouTube 동영상 삽입</h1>
</div>    
<div class="body">
    <div id="code" class="code">
        <p class="desc">링크입력 상자에 삽입할 <span>YouTube</span> 영상의 주소를 입력하세요.</p>
        <p class="desc">
            <label>링크입력 </label>
            <input type="text" name="url" style="width:320px;"/>
        </p>
    </div>
</div>
<div class="footer">
    <p><a href="#" onclick="closeWindow();" title="닫기" class="close">닫기</a></p>
    <ul>
        <li class="submit"><a href="#" onclick="done();" title="등록" class="btnlink">등록</a> </li>
    </ul>
</div>
</div>
</body>
</html>




08. 이제 다시 브라우저에서 에디터를 오픈하고 YouTube 동영상을 Daum Open Editor에 삽입해보자.







반응형
저작자표시

'API > DAUM 오픈 에디터' 카테고리의 다른 글

[Editor] Daum Open Editor 세팅하고 사용하기  (0) 2018.03.26
//

[jQuery] 선택 날짜를 태그로 생성하는 모듈[jQuery] 선택 날짜를 태그로 생성하는 모듈

Posted at 2018. 4. 19. 11:26 | Posted in JavaScript & jQuery/jQuery
반응형




■ 날짜 태그 생성하기




-. UI개발중 특정 날짜를 선택하면 그 날짜값을 태그로 생성하는 기능이 필요하게 되어 개발 후 정리한다.

-. 아래 예제 소스코드를 실행하기 위해서는 반드시 jQuery-ui에 대한 세팅이 필 수 불가결 하다.




# 소스코드

<html>

<head>

<title>:: 날짜 태그 추가하기 ::</title>

<link rel="stylesheet" type="text/css" href="http://localhost/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="http://localhost/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.min.js"></script>

<script type="text/javascript" src="http://localhost/jquery-ui-1.12.1.custom/jquery.ui.datepicker-ko.js"></script>

<style type="text/css">

#choiceDate {

width:100px;

text-align:center;

}


#tagBox {

border:2px solid #75DBE7;

border-radius:5px;

padding-top:10px;

padding-left:10px;

padding-right:10px;

padding-bottom:10px;

width:600px;

height:300px;

}

.daysTag{

float:left;

border-radius:5px;

background-color:#7CBAC1;

height:15px;

margin-left:5px;

margin-bottom:5px;

padding-top:3px;

padding-left:5px;

padding-right:5px;

padding-bottom:2px;

font-size:13px;

font-weight:bold;

color:#FFFFFF;

display:flex;

justify-content:center;

align-items:center;

}


.delIcon {

width:14px;

height:14px;

}

</style>

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery("#choiceDate").datepicker();

});


function dayTagProduction(day) {

var getOut = true;


// 이미 등록한 날짜가 있는지 확인한다.

jQuery(".choiceDay").each(function(idx) {

if(jQuery(".choiceDay").eq(idx).val() == day) {

alert(day + "일은 이미 추가된 날짜입니다.");

getOut = false;

return false;

}

});


if(getOut == true) {

// 등록한 날짜가 없다면 날짜태그를 추가한다.

var tag = "";

tag += "<a href='javascript:;' onClick='dayTagRemove(this);'>";

tag += "<div class='daysTag'>";

tag += day;

tag += "&nbsp;<img class='delIcon' src='x_icon.png'/>";


// 실제로 생성된 값을 입력하기 위한 hidden 타입 설정

tag += "<input type='hidden' class='choiceDay' name='choiceDay[]' value='" + day + "'/>";


tag += "</div>";

tag += "</a>";

jQuery("#tagBox").append(tag);

}


                else {


// 등록한 날짜가 존재한다면 날짜태그를 생성하지 않는다.

return false;

}

}

// 생성된 날짜태그를 제거한다.

function dayTagRemove(tag) {


var idx = jQuery(tag).index();

var day = jQuery(".choiceDay").eq(idx).val();


if(confirm(day + " 날짜를 삭제 하시겠습니까?") == true) {

jQuery(tag).remove();

}


                jQuery("#tagBox").append(tag);

}

</script>

</head>

<body>

<h2>날짜 태그 추가하기</h2>

<input type="text" id="choiceDate" onChange="dayTagProduction(this.value);" value=""/>

<div style="height:20px;"></div>

<div id="tagBox"></div>

</body>

</html>




# 출력결과






반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 움직이는 팝업 레이어 만들기  (0) 2018.05.29
[jQuery] 따라다니는플로팅 배너 제작  (0) 2018.04.23
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기  (2) 2018.03.22
[jQuery] AJAX를 사용한 파일 업로드  (1) 2018.03.18
[jQuery] 쇼핑몰 대표 이미지 상품박스  (0) 2018.03.14
//

[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>



# 출력결과




# 예외처리





반응형
저작자표시

'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
//

티스토리툴바