[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스

Posted at 2018. 8. 17. 17:57 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 텍스트 박스에 시간 입력시 콜론(HH:MM) 자동 삽입




jQuery 캘린더와 같이 jQuery모듈들 중에도 시간을 선택하게 해주는 모듈들이 상당히 있었으나.

분단위를 세세하게 지정하기 힘든등의 무언가 마음에 들지 않는 부분들이 있어 제작하게 되었다.

HHMM 식으로 콜론없이 쭉 4개의 숫자를 자동으로 입력하면 HH:MM형식으로 숫자가 자동으로 기입되는 그런 구조이다.



# 소스코드

<html>
<head>
<title>:: 시간 자동 콜론 삽입(HH:MM) ::</title>
<style type="text/css">
    .timeBox {
        text-align:center;
        width:60px;    
    }
</style>
<script type="text/javascript">
    function inputTimeColon(time) {


        // replace 함수를 사용하여 콜론( : )을 공백으로 치환한다.
        var replaceTime = time.value.replace(/\:/g, "");


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

            var hours = replaceTime.substring(0, 2);      // 선언한 변수 hours에 시간값을 담는다.
            var minute = replaceTime.substring(2, 4);    // 선언한 변수 minute에 분을 담는다.


            // isFinite함수를 사용하여 문자가 선언되었는지 확인한다.
            if(isFinite(hours + minute) == false) {
                alert("문자는 입력하실 수 없습니다.");
                time.value = "00:00";
                return false;
            }


            // 두 변수의 시간과 분을 합쳐 입력한 시간이 24시가 넘는지를 체크한다.
            if(hours + minute > 2400) {
                alert("시간은 24시를 넘길 수 없습니다.");
                time.value = "24:00";
                return false;
            }


            // 입력한 분의 값이 60분을 넘는지 체크한다.
            if(minute > 60) {
                alert("분은 60분을 넘길 수 없습니다.");
                time.value = hours + ":00";
                return false;
            }

            time.value = hours + ":" + minute;
        }
    }
</script>
</head>
<body>
    <h2>시간을 입력해 주세요</h2>

    <!-- maxlength의 값을 5로지정하여 다섯자리 이상의 값이 등록되는것을 막는다. -->

    <input type="text" class="timeBox" onKeyup="inputTimeColon(this);" placeholder="HH:MM" maxlength="5"/>
</body>
</html>




# 출력결과 - 정상적인 시간을 입력한 경우







# 예외처리① - 문자를 입력한 경우




# 예외처리② - 24시를 넘긴 시간을 입력한 경우




# 예외처리③ - 60분을 넘긴 시간을 입력한 경우







반응형
저작자표시

'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] 카드번호 입력폼 예제  (0) 2018.04.18
//

[jQuery] 커스텀 팝업창 오픈하기[jQuery] 커스텀 팝업창 오픈하기

Posted at 2018. 8. 14. 17:25 | Posted in JavaScript & jQuery/jQuery
반응형





다운로드 : https://www.jqueryscript.net/



Simple Plain Dialog Popup Plugin For jQuery Alerts이라는 jQuery 모듈을 사용하게 되었다.

이런 기존의 Dialog 경고창을 대신해 주는것을 jAlert이라고 하는 것 같은데 이건 그 수많은 모듈중 한가지일 뿐이다.

사용방법이 굉장히 단순해서 포스팅할 것 까지는 없었지만.

몇가지 기능적인 부분을 사용중 답답함을 느껴 이렇게 포스팅 하게 되었다.




■ 경고(Alert)창 팝업




#01. 기본 경고(Alert)창 팝업



# 소스코드

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 심플 다이얼로그 팝업 ::</title>
<link rel="stylesheet" href="jquery.alerts.css">
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="jquery.alerts.js" ></script>
<script type="text/javascript">
    function normalAlertWindow() {
        jAlert("루키", "#RED");
    }
</script>
</head>
<body>
    <h1>NOMAL ALERT</h1>
    <input type="button" onClick="normalAlertWindow();" value="경고창"/>
</body>
</html>




# 출력결과





#02. 콜백 기능을 이용한 경고(Alert)창 팝업


사실 해당 글을 포스팅하게 된 이유는 이것이다.

기본적인 alert창의 경우 alert창이 뜨게 되면 확인 버튼을 클릭하기 전까지

다음 작업이 진행되지 않지만, 이 jAlert의 경우는 창이 오픈됨과 동시에 바로 다음 작업이 진행되기 떄문에.

jAlert창이 팝업이 되고 정상적으로 OK 버튼을 누른 이후에 작업을 진행하기 위해서, 콜백 기능을 사용하게 되었다,



# 소스코드

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 심플 다이얼로그 팝업 ::</title>
<link rel="stylesheet" href="jquery.alerts.css">
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="jquery.alerts.js" ></script>
<script type="text/javascript">
    function callbackAlertWindow() {
        jAlert("피카부", "#VELVET", function() {
            window.location.href = "http://magic.wickedmiso.com/";
        });
    }
</script>
</head>
<body>
    <h1>CALLBACK ALERT</h1>
    <input type="button" onClick="callbackAlertWindow();" value="경고창"/>
</body>
</html>




# 출력결과





■ 확인(Confirm)창 팝업



# 소스코드

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 심플 다이얼로그 팝업 ::</title>
<link rel="stylesheet" href="jquery.alerts.css">
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="jquery.alerts.js" ></script>
<script type="text/javascript">
    function choiceConfirmWindow() {
        jConfirm("빨간맛", "#RED", function(result) {
            if(result == true) {
                alert("빨간맛 궁금해 허니");
            } else if(result == false) {
                alert("내가 제일 좋아하는건 여름에 너어~");
            }
        });
    }
</script>
</head>
<body>
    <h1>CALLBACK ALERT</h1>
    <input type="button" onClick="choiceConfirmWindow();" value="경고창"/>
</body>
</html> 



# 출력결과






반응형
저작자표시

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

[jQuery] jQuery 셀렉터 정리  (0) 2018.09.10
[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기  (1) 2018.08.20
[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기  (0) 2018.08.09
[jQuery] SNS 공유 팝업창 제작(심화)  (0) 2018.06.07
[jQuery] 움직이는 팝업 레이어 만들기  (0) 2018.05.29
//

[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기

Posted at 2018. 8. 9. 23:43 | Posted in JavaScript & jQuery/jQuery
반응형



■ jQuery :: sortable()을 이용한 레이어 재배치




sortable 기능을 사용하면 클릭 드래그 형태로 이미 지정된 엘리먼트의 위치를, 변경하고, 지정할 수 있다.

해당 포스팅은 단순히 엘리먼트의 위치를 지정하는데 그치지 않고.

지정된 위치에따른 값을 재배치할 수 있게 재배치된 순서(indxe)값을 전송하는 것까지 목표로 하였다.



# 소스코드 - 테이블 행의 순서를 변경하고 그 값을 전송할 sortable_transmit.php

 sortable_transmit.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 마우스 드래그 테이블 ::</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
    body { text-align:center; }
    .girlGroup { list-style-type:none;margin:0;padding:0;width:100%; }
    .girlGroup li { margin:3px;padding:0.4em;font-size:1em;height:18px;text-align:center; }
    .memberRow { border:solid 1px #C5C5C5;background:#F6F6F6; }
</style>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        // sortable은 객체의 순서를 재배치 할 수 있다.
        jQuery(".girlGroup").sortable();

        jQuery(".memberRow").mouseover(function() {

            jQuery(".memberRow").css("border", "solid 1px #C5C5C5").css("background", "#F6F6F6");

            var idx = jQuery(".memberRow").index(this);
            jQuery(".memberRow").eq(idx).css("border", "solid 3px #FF0000").css("background", "#FFC0CB");
        });
    });

    function wujuSonyeoTransmit() {

        var girls = "";


       // memberRow의 개수만큼 반복문을 돌리면서 enName값을 콤마로 구분하여 하나의 문자열로 만든다.
        jQuery(".memberRow").each(function(idx) {

            // 한글 이름을 전송
            // girls += jQuery(".memberRow").eq(idx).text + ", ";

            // 영문 이름을 전송
            girls += jQuery(".memberRow").eq(idx).attr("enName") + ",";
        });

        // 마지막 콤마 제거 후, 값을 cosmicGirls 에 담는다.
        jQuery("#cosmicGirls").val(girls.slice(0, -1));

        jQuery("#sortTableForm").attr("action", "./sortable_receive.php");
        jQuery("#sortTableForm").submit();
    }
</script>
</head>
<body>
<form method="post" id="sortTableForm" name="sortTableForm">
<input type="hidden" id="cosmicGirls" name="cosmicGirls" value=""/>
    <h1>우&nbsp;주&nbsp;소&nbsp;녀</h1>
    <ul class="girlGroup">
      <li class="memberRow" enName="seola">설아</li>
      <li class="memberRow" enName="xuanyi">선의</li>
      <li class="memberRow" enName="bona">보나</li>
      <li class="memberRow" enName="exy">엑시</li>
      <li class="memberRow" enName="soobin">수빈</li>
      <li class="memberRow" enName="luda">루다</li>
      <li class="memberRow" enName="dawon">다원</li>
      <li class="memberRow" enName="eunseo">은서</li>
      <li class="memberRow" enName="chengxiao">성소</li>
      <li class="memberRow" enName="meiqi">미기</li>
      <li class="memberRow" enName="yeoreum">여름</li>
      <li class="memberRow" enName="dayoung">다영</li>
      <li class="memberRow" enName="yeonjung">연정</li>
    </ul>
    <br/>
    <input type="button" onClick="wujuSonyeoTransmit();" value="전송"/>
</form>
</body>
</html>




# 소스코드 - 테이블 행의 순서를 변경하고 그 값을 전송받을 sortable_receive.php

 sortable_receive.php

<?php
    $wujuSonyeo = explode(",", $_POST['cosmicGirls']);

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




# 출력결과








반응형
저작자표시

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

[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기  (1) 2018.08.20
[jQuery] 커스텀 팝업창 오픈하기  (0) 2018.08.14
[jQuery] SNS 공유 팝업창 제작(심화)  (0) 2018.06.07
[jQuery] 움직이는 팝업 레이어 만들기  (0) 2018.05.29
[jQuery] 따라다니는플로팅 배너 제작  (0) 2018.04.23
//

[jQuery] SNS 공유 팝업창 제작(심화)[jQuery] SNS 공유 팝업창 제작(심화)

Posted at 2018. 6. 7. 17:33 | Posted in JavaScript & jQuery/jQuery
반응형

참고 : https://opentutorials.org/course/50/190





어떤 사이트의 유지보수 업무를 맡았을때의 일이다.

사이트가 설계부터 상당히 조악했었다. include 부터가 이상하게 꼬여 있었기에.

사이트의 이벤트 페이지를 SNS에 공유하는 기능을 만들때였다.


내가 원하는건 해당 SNS공유 버튼이 있는 EVENT 페이지에서의 내용이

SNS에 잘 공유되는 것이었는데, 계속 원치 않는 메인페이지로만 공유되고.

관련 이미지도 띄울 수 없는 사태였다.













include 경로가 굉장히 이상하게 꼬여있었기에.

왠만하면 그냥 자동으로 되는 SNS Share 기능이 제대로 작동 될수가 없던 그런 상황이었다.

결국 SNS 공유 기능에 사용되는.


meta 태그의 property 속성 og: 관련 내용을 직접 설정하는 식으로 내용을 해결해 나가야 했고.

괜히 5분 10분이면 끝날작업을, 엄청 생고생 하며 만들었고.


짜증이 매우 났기에, 또 이런 상황에 대응하기위한 모듈을 만들 생각으로

이렇게 포스팅하게 되었다.



# 소스코드

<script type="text/javascript">
function shareSns(sns) {
    var getUrl = "?name=<?=$_GET['eventName']?>&title=<?=$_GET['eventTitle']?>&img=" + jQuery("img:eq(10)").attr("src");
    var fullUrl = "";
    if(sns == "f") {
        fullUrl = "http://www.facebook.com/share.php?u=" + encodeURIComponent("http://wickedmiso.com/events/sns_share.php" + getUrl);
    } else if(sns == "t") {
        fullUrl = "https://twitter.com/?status=" + encodeURIComponent("http://wickedmiso.com/events/sns_share.php" + getUrl);
    } else if(sns == "k") {
        fullUrl = "https://story.kakao.com/share?url=" + encodeURIComponent("http://wickedmiso.com/events/sns_share.php" + getUrl);
    }
    window.open(fullUrl, "", "width=600, height=500, menubar=no, toolbar=no, scrollbars=no");
}
</script>



encodeURIComponent


웹을 통해서 데이터를 전송할 때 특정 문자들은 특수한 기능으로 사용된다.

예를들어, http://a.com?name=egoing&job=programmer에서

&job=programmer 중 '&'는 하나의 파라미터가 끝나고 다음 파라미터가 온다는 의미이다.

그런데 다음과 같이 job의 값에 &이 포함된다면 시스템은 job의 값을 제대로 인식 할 수 없게 된다.

http://a.com?name=egoing&job=programmer&blogger

이런 문제를 회피하기 위해서 다음과 같이 치환해 준다.

http://a.com?name=egoing&job=programmer%26bloogger

그럼 시스템에서는 %26을 &으로 해석하고 의도대로 해석 할 수 있게 된다.

이러한 처리를 이스케이핑(eascaping) 라고 부른다.




# 출력결과 - sns_share.php

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta property="og:title" content="<?=$_GET["title"]?>"/>
<meta property="og:image" content="<?=$_GET["img"]?>"/>
<meta property="og:type" content="travel"/>
<meta property="og:site_name" content="HUISTENBOSCH"/>
<meta property="og:description" content=""/>
<input type="hidden" id="name" value="<?=$_GET['name']?>"/>
<input type="hidden" id="title" value="<?=$_GET['title']?>"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.0.min.js"></script>
<script language="javascript">
jQuery(document).ready(function(){

    var eventName = jQuery("#name").val();
    var eventTitle = jQuery("#title").val();
    var mobile = "";
    var smartPhones = [
          "iphone", "ipad", "lgtelecom", "windows ce", "blackberry", "skt", "mobile", "samsung", "nokia", "blackberry"
        , "android", "android", "sony", "phone", "webos", "sonyerricsson", "opera mini", "opera mobi", "iemobile"
    ];

    for(var num in smartPhones) {  
        if(navigator.userAgent.toLowerCase().match(new RegExp(smartPhones[num]))) {
            mobile = "http://m.wickedmiso.com/event.php";
        }
    }

    var url = (mobile) ? mobile : "http://wickedmiso.com/events/";

    var redirect =
          "?eventName=" + eventName
        + "&eventTitle=" + eventTitle;

    location.href = url + redirect;
});
</script>
</head>
<body>
</body>
</html>




# 출력결과




반응형
저작자표시

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

[jQuery] 커스텀 팝업창 오픈하기  (0) 2018.08.14
[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기  (0) 2018.08.09
[jQuery] 움직이는 팝업 레이어 만들기  (0) 2018.05.29
[jQuery] 따라다니는플로팅 배너 제작  (0) 2018.04.23
[jQuery] 선택 날짜를 태그로 생성하는 모듈  (0) 2018.04.19
//

티스토리툴바