[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입

Posted at 2018. 8. 20. 18:07 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 천단위 이상의 입력값에 자동콤마( , ) 삽입




# 소스코드

<html>
<head>
<title>:: 천단위 콤마 자동 삽입 ::</title>
<script type="text/javascript">
    function inputNumberAutoComma(obj) {
       
        // 콤마( , )의 경우도 문자로 인식되기때문에 콤마를 따로 제거한다.
        var deleteComma = obj.value.replace(/\,/g, "");

        // 콤마( , )를 제외하고 문자가 입력되었는지를 확인한다.
        if(isFinite(deleteComma) == false) {
            alert("문자는 입력하실 수 없습니다.");
            obj.value = "";
            return false;
        }
       
        // 기존에 들어가있던 콤마( , )를 제거한 이 후의 입력값에 다시 콤마( , )를 삽입한다.
        obj.value = inputNumberWithComma(inputNumberRemoveComma(obj.value));
    }
   
    // 천단위 이상의 숫자에 콤마( , )를 삽입하는 함수
    function inputNumberWithComma(str) {

        str = String(str);
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,");
    }

    // 콤마( , )가 들어간 값에 콤마를 제거하는 함수
    function inputNumberRemoveComma(str) {

        str = String(str);
        return str.replace(/[^\d]+/g, "");
    }
</script>
</head>
<body>
    <h2>숫자를 입력해 주세요.</h2>
    <input type="text" onKeyup="inputNumberAutoComma(this);" value="" style="text-align:right;"/>
</body>
</html>




# 출력결과











■ 천단위 자동콤마( , ) 삽입 및 소수점 표현




# 소스코드

<html>
<head>
<title>:: TEXT 박스 자동 콤마 삽입 + 소수점 기호 ::</title>
<script language="javascript">
function inputNumberAutoComma(obj) {
    
    var number = obj.value;
    var integer = obj.value;
    var point = number.indexOf(".");
    var decimal = "";
    var chekcd = "";

    // 첫번째 수부터 소수점 기호( . )를 사용 방지
    if(number.charAt(0) == ".") {
        alert("첫번째 수부터 소수점 기호( . )를 사용할 수 없습니다.");
        obj.value = "";
        return false;
    }
    
    // 소수점이 존재하면 태우는 분기
    if(point > 0) {

        // 소수점 앞 자리값만을 따로 담는다.
        integer = number.substr(0, point);

        // 소수점 아래 자리값만을 따로 담는다.
        decimal = number.substr((point + 1), number.length);
        chekcd = inputNumberisFinit(decimal);

        if(chekcd == "N") {
            alert("문자는 입력하실 수 없습니다.");
            obj.value = "";
            return false;
        }
    }

    // 정수형의 콤마를 제거한다.
    integer = integer.replace(/\,/g, "");
    chekcd = inputNumberisFinit(integer);

    if(chekcd == "N") {
        alert("문자는 입력하실 수 없습니다.");
        obj.value = "";
        return false;
    }

    // 정수형을 한번더 점검한다.
    integer = inputNumberWithComma(inputNumberRemoveComma(integer));
    
    // 소수가 존재하면 나누었던 콤마 기호를 삽입한다.
    if(point > 0) {
        obj.value = integer + "." + decimal;
    }
    
    // 소수가 존재하지 않는다면 콤마값을 넣은 정수만 삽입한다.
    else {
        obj.value = integer;
    }
}

// 천단위 이상의 숫자에 콤마( , )를 삽입하는 함수
function inputNumberWithComma(str) {
    str = String(str);
    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,");
}

// 콤마( , )가 들어간 값에 콤마를 제거하는 함수
function inputNumberRemoveComma(str) {
    str = String(str);
    return str.replace(/[^\d]+/g, "");
}

// 문자 여부를 확인하고 문자가 존재하면 N, 존재하지 않으면 Y를 리턴한다.
function inputNumberisFinit(str) {
    if(isFinite(str) == false) {
        return "N";
    } else {
        return "Y";
    }
}
</script>
</head>
<body>
    <h2>숫자를 입력해 주세요.</h2>
    <input type="text" onKeyup="inputNumberAutoComma(this);" value="" style="text-align:right;"/>
</body>
</html>




# 출력결과






반응형
저작자표시

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

[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
[JavaScript] Cookie 생성, 삭제 및 읽어오기  (4) 2018.09.03
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입  (7) 2018.08.21
[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스  (3) 2018.08.17
[JavaScript] 카드번호 입력폼 예제  (0) 2018.04.18
//

[MySQL] 날짜 YYYY-MM-DD 형식으로 출력하기.[MySQL] 날짜 YYYY-MM-DD 형식으로 출력하기.

Posted at 2018. 8. 20. 17:22 | Posted in MySQL/MySQL
반응형




■ DATE_FORMAT 함수를 이용한 날짜 출력




 mysql> SELECT DATE_FORMAT(NOW(), '%Y-%m-%d') AS to_day FROM DUAL;





반응형
저작자표시

'MySQL > MySQL' 카테고리의 다른 글

[MySQL] ON DUPLICATE KEY UPDATE 사용하기  (0) 2020.05.14
[MySQL] 전체 날짜 출력하기 - 데이터가 없는 경우 포함  (2) 2020.02.07
[PHP] MySQL 한글 깨지는 경우  (0) 2018.09.09
//

[Windows] Windows 터미널에서 TELNET 사용하기[Windows] Windows 터미널에서 TELNET 사용하기

Posted at 2018. 8. 20. 17:13 | Posted in Windows
반응형




■ 윈도우즈에서 텔넷 사용하기




01. 제어판을 열고 프로그램 및 기능을 선택한다.





02. 프로그램 및 기능으로 화면이 전환되면 좌측의 Windows 기능 사용 / 사용 안함 을 선택한다.




03. Windows 기능 창이 팝업되면 최하단에 텔넷 서버, 텔넷 클라이언트를 체크하고 확인 버튼을 클릭한뒤 닫아준다.




04. 키보드에서 윈도우키 + R 버튼을 누르고 cmd 라고 입력하여 터미널 창을 실행한다.





05. 입력창에 telnet이라고 입력한다.





06. 그럼 아래와같이 Microsft Telnet이 사용가능해진 것을 확인할 수 있다.





반응형
저작자표시
//

[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기

Posted at 2018. 8. 20. 10:42 | Posted in JavaScript & jQuery/jQuery
반응형




■ 캘린더( DatePicker ) 사용시 시작일 / 종료일 예외처리




사이트 제작중 검색할 데이터의 시작일과 종료일을 설정하는 경우는 자주 있는 일이다.


그렇다면 검색 조건을 시작일이 종료일보다 이후에 오면 안되고,


종료일이 시작일보다 먼저일 수 없게 예외처리를 해두기 위해 스크립트를 짜게 되었고.


아래와 같이 정리해 두었다.



# 소스코드

<html>
<head>
<title>:: 시작일 / 종료일 체크하기 ::</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
    .datePicker {
        text-align:center;
        width:80px;
    }

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

    li {
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        border : 0;
        float: left;
    }
</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() {


        jQuery(".datePicker").datepicker();
        
        // jQuery UI Datepicker 한글 변환
        jQuery.datepicker.regional['ko'] = {
              closeText : "닫기"
            , prevText : ""
            , nextText : ""
            , currentText : "오늘"
            , monthNames : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
            , monthNamesShort : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
            , dayNames : ["일", "월", "화", "수", "목", "금", "토"]
            , dayNamesShort : ["일", "월", "화", "수", "목", "금", "토"]
            , dayNamesMin : ["일", "월", "화", "수", "목", "금", "토"]
            , weekHeader : "Wk"
            , dateFormat : "yy-mm-dd"
            , firstDay : 0
            , isRTL : false
            , yearSuffix : "&nbsp;년"
            , showMonthAfterYear : true
            , changeMonth : true
            // , changeYear : true
            // , autoSize : true

            , beforeShow:function(input) {
                var position = jQuery(input).position();
                setTimeout(function() {
                    jQuery("#ui-datepicker-div").css({"left":position.left});
               })
            }
        };
        jQuery.datepicker.setDefaults(jQuery.datepicker.regional['ko']);
    });


    function inputDateComparison(obj) {

        // 현재 엘리먼트의 부모(li) > 부모(ul) > 첫번째자식(li) > 첫번째자식(input)
        let startDate = inputDateSplit(obj.parentNode.parentNode.firstElementChild.firstChild.value);    // 시작일


        // 현재 엘리먼트의 부모(li) > 부모(ul) > 마지막자식(li) > 첫번째자식(input)

        let endDate = inputDateSplit(obj.parentNode.parentNode.lastElementChild.firstChild.value);        // 종료일

        let objDate = inputDateSplit(obj.value);    // 입력한 엘리먼트의 일자
        // 입력일을 확인하는 이유는 현재 작성한 일자가 시작일인지 종료일인지 확인하기 위해서이다.

        if(startDate == objDate && startDate > endDate) {
            alert("시작일이 종료일보다 이 후 일수는 없습니다.\n다시 선택하여 주시기 바랍니다.");
            obj.parentNode.parentNode.firstElementChild.firstChild.value = "";
            // obj.parentNode.parentNode.firstElementChild.firstChild.focus();
        }


        else if(endDate == objDate && endDate < startDate) {

            if(obj.parentNode.parentNode.firstElementChild.firstChild.value == "") {
                alert("시작일이 입력되지 않았습니다.\n시작일을 먼저 입력해주세요");
                obj.parentNode.parentNode.lastElementChild.firstChild.value = "";
                // obj.parentNode.parentNode.firstElementChild.firstChild.focus();
            }


            else {
                alert("종료일이 시작일보다 이 전 일수는 없습니다.\n다시 선택하여 주시기 바랍니다.");
                obj.parentNode.parentNode.lastElementChild.firstChild.value = "";
                // obj.parentNode.parentNode.lastElementChild.lastChild.focus();
            }
        }


        else {
            return false;
        }
    }


    // 날짜형식에 "-"이 사용된 경우에 한하여 날짜값에서 "-" 기호를 제거한다.
    function inputDateSplit(obj) {


        let dateArray = obj.split("-");
        return dateArray[0] + dateArray[1] + dateArray[2];
    }
</script>
</head>
<body>

   <ul>

        <li><input type="text" class="datePicker" onChange="inputDateComparison(this);" value=""/></li>
        <li>&nbsp;~&nbsp;</li>
        <li><input type="text" class="datePicker" onChange="inputDateComparison(this);" value=""/></li>

   </ul>

</body>
</html>




# 출력결과





반응형
저작자표시

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

[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기  (0) 2018.09.17
[jQuery] jQuery 셀렉터 정리  (0) 2018.09.10
[jQuery] 커스텀 팝업창 오픈하기  (0) 2018.08.14
[jQuery] 클릭 드래그 방식으로, 테이블 위치 이동, 변경하기  (0) 2018.08.09
[jQuery] SNS 공유 팝업창 제작(심화)  (0) 2018.06.07
//

티스토리툴바