'모듈' 태그의 글 목록

'모듈'에 해당되는 글 43건

[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입

Posted at 2020. 9. 10. 18:20 | Posted in JavaScript & jQuery/JavaScript

■ 날짜 입력 형식에 하이픈(-)기호 자동 삽입

# 소스코드

<html>

<head>

<title>:: JavaScript 날짜 하이픈(-) 삽입 ::</title>

function inputYMDNumber(obj) {

// @see DELETE 키버튼이 눌리지 않은 경우에만 실행

if(event.keyCode != 8) {

// @see 숫자와 하이픈(-)기호의 값만 존재하는 경우 실행

if(obj.value.replace(/[0-9 \-]/g, "").length == 0) {

// @see 하이픈(-)기호를 제거한다.

let number = obj.value.replace(/[^0-9]/g,"");

let ymd = "";

// @see 문자열의 길이에 따라 Year, Month, Day 앞에 하이픈(-)기호를 삽입한다.

if(number.length < 4) {

return number;

} else if(number.length < 6){

ymd += number.substr(0, 4);

ymd += "-";

ymd += number.substr(4);

} else {

ymd += number.substr(0, 4);

ymd += "-";

ymd += number.substr(4, 2);

ymd += "-";

ymd += number.substr(6);

}

// @see 입력 가능 날짜 제한 기능 - 선택

// if(ymd.length == 10) {

// const birthDay = new Date(number.substr(0,4)+"/"+number.substr(4,2)+"/"+number.substr(6)+" 00:00:00");

// const limitDay = new Date("2000/10/04 23:59:59");

// if(birthDay > limitDay) {

// alert("2000년 10월 04일 이후의 날짜는\n선택할 수 없습니다.");

// obj.value = "";

// obj.focus();

// return false;

// }

obj.value = ymd;

} else {

alert("숫자 이외의 값은 입력하실 수 없습니다.");

//@see 숫자와 하이픈(-)기호 이외의 모든 값은 삭제한다.

obj.value = obj.value.replace(/[^0-9 ^\-]/g,"");

return false;

}

} else {

return false;

}

</script>

</head>

<body>

</body>

</html>

# 출력결과

저작자표시

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

[JavaScript] 입력 텍스트값 Byte 체크 (0)	2020.09.10
[JavaScript] (0)	2020.09.09
[JavaScript] 자바스크립트로 HWP 파일 제어 (0)	2020.09.07
[JavaScript] 자바스크립트를 이용한 캘린더 제작 (13)	2020.07.13
[JavaScript] SelectBox를 사용하는 날짜 검색창 제작 (0)	2020.07.12

[JavaScript] 입력 텍스트값 Byte 체크[JavaScript] 입력 텍스트값 Byte 체크

Posted at 2020. 9. 10. 15:43 | Posted in JavaScript & jQuery/JavaScript

참고 : https://zzznara2.tistory.com/458

■ 입력 텍스트 값 자동으로 Byte체크하기

다국어 페이지 제작에 따른 입력 텍스트의 글자( Byte단위 )의 체크가 필요했다.

텍스트 박스에 글자를 입력하다가 해당 텍스트가 정해진 Byte의 단위를 넘어서는 경우가 발생하면

자동으로 더 이상의 텍스트 삽입을 막는 예이다.

# 소스코드

<html>
<head>
<title>:: JavaScript Byte 체크하기 ::</title>
<style type="text/css">
.contents { width : 99%;height : 100px; }
.viewByte { font-weight : bold;color : red; }
</style>
<script type="text/javascript">

// @see 설정된 바이트의 크기를 넘어서지 못하게 체크하는 함수
function inputLimitByteChecked( obj ) {

var calByte = {
getByteLength : function( string ) {

if( string == null || string.length == 0 ) {
return 0;
}

let size = 0;

for( let num = 0; num < string.length; num++ ) {
size += this.charByteSize( string.charAt( num ) );
}

return size;
}
, cutByteLength : function( string, length ) {

if( string == null || string.length == 0 ) {
return 0;
}

let size = 0;
let rIndex = string.length;

for( let num = 0; num < string.length; num++ ) {

size += this.charByteSize( string.charAt( num ) );

if( size == length ) {
rIndex = num + 1;
break;
} else if( size > length ) {
rIndex = num;
break;
}
}

return string.substring( 0, rIndex );
}
, charByteSize : function( ch ) {
if( ch == null || ch.length == 0 ) {
return 0;
}

let charCode = ch.charCodeAt( 0 );

if( charCode <= 0x00007F ) {
return 1;
} else if( charCode <= 0x0007FF ) {
return 2;
} else if( charCode <= 0x00FFFF ) {
return 3;
} else {
return 4;
}
}
};

if( calByte.getByteLength( obj.value ) > obj.dataset.byte ) {
alert("작성할 수 있는 텍스트 글자 범위를 초과하였습니다.");
obj.value = calByte.cutByteLength( obj.value, obj.dataset.byte );
} else {
document.getElementsByClassName( "viewByte" )[0].innerText = calByte.getByteLength( obj.value );
}
}
</script>
</head>
<body>
<h1>■ 입력 텍스트의 자동 Byte 체크</h1>
<textarea class="contents" onKeyup="inputLimitByteChecked( this );" data-byte="255"></textarea>
<p><span class="viewByte">0</span> Byte 입니다.</p>
</body>
</html>

이제 해당 코드의 출력결과를 살펴보자.

텍스트 박스에 글자를 계속 입력해 나가면 data-byte 에 설정된 255 값이 넘으면 경고창이 나타날 것이다.

# 출력결과

경고창을 닫으면 255 값이 넘어선 텍스트는 자동으로 삭제가 이루어진다.

저작자표시

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

[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입 (0)	2020.09.10
[JavaScript] (0)	2020.09.09
[JavaScript] 자바스크립트로 HWP 파일 제어 (0)	2020.09.07
[JavaScript] 자바스크립트를 이용한 캘린더 제작 (13)	2020.07.13
[JavaScript] SelectBox를 사용하는 날짜 검색창 제작 (0)	2020.07.12

[jQuery] TextBox에서 다중 선택 기능 제작[jQuery] TextBox에서 다중 선택 기능 제작

Posted at 2020. 7. 24. 07:54 | Posted in JavaScript & jQuery/jQuery

■ 텍스트 입력박스 다중 선택 기능 만들기

jQuery UI 중에는 다중 선택을 위한 Autocomplete - Multiple values 기능이 존재한다.

여러개의 항목중 원하는 몇가지를 선택하는것에 적합한데.

샘플코드( https://jqueryui.com/autocomplete/#multiple ) 를 보면 쉽게 알 수 있을 것이다.

그렇지만 위 샘플코드에서는 선택 입력한 값의 내용이 다시 선택이 가능하다는 단점이 존재하여.

한번 선택한 항목은 선택에서 배제될 수 있게 내용을 조금 수정해 보았다.

# 소스코드

<head>

<title>jQuery UI Autocomplete - 다중 선택</title>

jQuery(document).ready(function() {

jQuery( "#tags" ).on( "keydown" , function( event ) {

// 항목을 선택할때 탭으로 이동하지 못하게 한다.

if( event.keyCode === jQuery.ui.keyCode.TAB && jQuery(this).autocomplete("instance").menu.active ) {

event.preventDefault();

}

}).autocomplete({

minLength : 0

, source : function( request, response ) {

// Autocomplete 자동완성 문자 리스트 - 초기값 ( 변경되지 않는 절대값 )

const availableTags = [

"파이어폭스", "크롬", "오페라", "웨일", "사파리", "익스플로러", "엣지"

, "비발디", "브레이브", "돌핀", "토치", "미도리", "아반트", "맥스톤"

];

// Autocomplete 자동완성 문자 리스트 - 변경값 ( 검색이 이루어지는 실제 배열의 삭제 및 재생산이 이루어짐 )

let unfoldTags = availableTags;

// 콤마( , )로 구분되는 문자열을 배열로 만든다.

let arrTrem = request.term.split(",");

// 문자 리스트에서 이미 선택된 문자열은 삭제한다.

arrTrem.forEach(function(trem) {

let search = unfoldTags.indexOf( trem.trim() );

if(search != -1) {

unfoldTags.splice(search, 1);

}

});

// 자동 완성을 다시 실행하지만, 마지막 용어를 추출한다.

response(jQuery.ui.autocomplete.filter(unfoldTags, extractLast(request.term)));

unfoldTags = null;

}

, focus : function() {

return false;

}

, select : function(event, ui) {

let terms = split(this.value);

// 현재 입력값을 제거한다.

terms.pop();

// 선택된 아이템을 추가한다.

terms.push(ui.item.value);

// 끝에 콤마와 공백을 추가한다.

terms.push("");

this.value = terms.join(", ");

return false;

}

});

// 공백문자에 대응

function split(val) {

return val.split( /,\s*/ );

}

// 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환

function extractLast(term) {

return split(term).pop();

}

});

</script>

</head>

<body>

<label for="tags">프로그래밍 언어 : </label>

</div>

</body>

</html>

# 출력결과

저작자표시

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

[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영 (0)	2020.03.02
[jQuery] JCROP을 이용한 이미지 자르기 - Sample (5)	2020.02.11
[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작 (0)	2019.06.18
[jQuery] 팝업 창 외에 다른 항목 클릭 막기 (0)	2019.06.04
[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기 (7)	2019.01.31

[JavaScript] 자바스크립트를 이용한 캘린더 제작[JavaScript] 자바스크립트를 이용한 캘린더 제작

Posted at 2020. 7. 13. 09:28 | Posted in JavaScript & jQuery/JavaScript

참고 : https://jerryjerryjerry.tistory.com/26

■ 순수 자바스크립트만을 이용한 달력 제작

jQuery등을 통한 캘린더 라이브러리가 많이 존재하지만 뭔가 꼭 있어야 하거나, 구현해야하는 효과가 있는경우

원하는 캘린더 라이브러리를 다시 찾아봐야 하거나, 라이브러리를 마개조 해야하는 상황이 발생하여

순수하게 자바스크립트만을 이용한 달력을 제작하게 되었다.

위 세가지 조건을 만족시키는 캘린더를 제작해 보려고 한다.

# 소스코드

<html>
<head>
<title>:: JavaScript 캘린더 ::</title>
<style type="text/css">
    a { color:#000000;text-decoration:none; }
    .scriptCalendar { text-align:center; }
    .scriptCalendar > thead > tr > td { width:50px;height:50px; }
    .scriptCalendar > thead > tr:first-child > td { font-weight:bold; }
    .scriptCalendar > thead > tr:last-child > td { background-color:#90EE90; }
    .scriptCalendar > tbody > tr > td { width:50px;height:50px; }
</style>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        buildCalendar();
    });

    var today = new Date(); // @param 전역 변수, 오늘 날짜 / 내 컴퓨터 로컬을 기준으로 today에 Date 객체를 넣어줌
    var date = new Date(); // @param 전역 변수, today의 Date를 세어주는 역할

    /**
     * @brief   이전달 버튼 클릭
     */
    function prevCalendar() {
        this.today = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
        buildCalendar();    // @param 전월 캘린더 출력 요청
    }

    /**
     * @brief   다음달 버튼 클릭
     */
    function nextCalendar() {
        this.today = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
        buildCalendar();    // @param 명월 캘린더 출력 요청
    }

    /**
     * @brief   캘린더 오픈
     * @details 날짜 값을 받아 캘린더 폼을 생성하고, 날짜값을 채워넣는다.
     */
    function buildCalendar() {

        let doMonth = new Date(today.getFullYear(), today.getMonth(), 1);
        let lastDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);

        let tbCalendar = document.querySelector(".scriptCalendar > tbody");

        document.getElementById("calYear").innerText = today.getFullYear();                                  // @param YYYY월
        document.getElementById("calMonth").innerText = autoLeftPad((today.getMonth() + 1), 2);   // @param MM월

        // @details 이전 캘린더의 출력결과가 남아있다면, 이전 캘린더를 삭제한다.
        while(tbCalendar.rows.length > 0) {
            tbCalendar.deleteRow(tbCalendar.rows.length - 1);
        }

        // @param 첫번째 개행
        let row = tbCalendar.insertRow();

        // @param 날짜가 표기될 열의 증가값
        let dom = 1;

        // @details 시작일의 요일값( doMonth.getDay() ) + 해당월의 전체일( lastDate.getDate())을 더해준 값에서
        //               7로 나눈값을 올림( Math.ceil() )하고 다시 시작일의 요일값( doMonth.getDay() )을 빼준다.
        let daysLength = (Math.ceil((doMonth.getDay() + lastDate.getDate()) / 7) * 7) - doMonth.getDay();

        // @param 달력 출력
        // @details 시작값은 1일을 직접 지정하고 요일값( doMonth.getDay() )를 빼서 마이너스( - )로 for문을 시작한다.
        for(let day = 1 - doMonth.getDay(); daysLength >= day; day++) {

            let column = row.insertCell();

            // @param 평일( 전월일과 익월일의 데이터 제외 )
            if(Math.sign(day) == 1 && lastDate.getDate() >= day) {

                // @param 평일 날짜 데이터 삽입

                column.innerText = autoLeftPad(day, 2);

                // @param 일요일인 경우
                if(dom % 7 == 1) {
                    column.style.color = "#FF4D4D";
                }

                // @param 토요일인 경우
                if(dom % 7 == 0) {
                    column.style.color = "#4D4DFF";
                    row = tbCalendar.insertRow();   // @param 토요일이 지나면 다시 가로 행을 한줄 추가한다.
                }

            }

            // @param 평일 전월일과 익월일의 데이터 날짜변경
            else {
                let exceptDay = new Date(doMonth.getFullYear(), doMonth.getMonth(), day);
                column.innerText = autoLeftPad(exceptDay.getDate(), 2);
                column.style.color = "#A9A9A9";
            }

            // @brief   전월, 명월 음영처리
            // @details 현재년과 선택 년도가 같은경우
            if(today.getFullYear() == date.getFullYear()) {

                // @details 현재월과 선택월이 같은경우
                if(today.getMonth() == date.getMonth()) {

                    // @details 현재일보다 이전인 경우이면서 현재월에 포함되는 일인경우
                    if(date.getDate() > day && Math.sign(day) == 1) {
                        column.style.backgroundColor = "#E5E5E5";
                    }

                    // @details 현재일보다 이후이면서 현재월에 포함되는 일인경우
                    else if(date.getDate() < day && lastDate.getDate() >= day) {
                        column.style.backgroundColor = "#FFFFFF";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }

                    // @details 현재일인 경우
                    else if(date.getDate() == day) {
                        column.style.backgroundColor = "#FFFFE6";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }

                // @details 현재월보다 이전인경우
                } else if(today.getMonth() < date.getMonth()) {
                    if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                        column.style.backgroundColor = "#E5E5E5";
                    }
                }

                // @details 현재월보다 이후인경우
                else {
                    if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                        column.style.backgroundColor = "#FFFFFF";
                        column.style.cursor = "pointer";
                        column.onclick = function(){ calendarChoiceDay(this); }
                    }
                }
            }

            // @details 선택한년도가 현재년도보다 작은경우
            else if(today.getFullYear() < date.getFullYear()) {
                if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                    column.style.backgroundColor = "#E5E5E5";
                }
            }

            // @details 선택한년도가 현재년도보다 큰경우
            else {
                if(Math.sign(day) == 1 && day <= lastDate.getDate()) {
                    column.style.backgroundColor = "#FFFFFF";
                    column.style.cursor = "pointer";
                    column.onclick = function(){ calendarChoiceDay(this); }
                }
            }

            dom++;

        }
    }

    /**
     * @brief   날짜 선택
     * @details 사용자가 선택한 날짜에 체크표시를 남긴다.
     */
    function calendarChoiceDay(column) {

        // @param 기존 선택일이 존재하는 경우 기존 선택일의 표시형식을 초기화 한다.
        if(document.getElementsByClassName("choiceDay")[0]) {
            document.getElementsByClassName("choiceDay")[0].style.backgroundColor = "#FFFFFF";
            document.getElementsByClassName("choiceDay")[0].classList.remove("choiceDay");
        }

        // @param 선택일 체크 표시
        column.style.backgroundColor = "#FF9999";

        // @param 선택일 클래스명 변경
        column.classList.add("choiceDay");
    }

    /**
     * @brief   숫자 두자릿수( 00 ) 변경
     * @details 자릿수가 한자리인 ( 1, 2, 3등 )의 값을 10, 11, 12등과 같은 두자리수 형식으로 맞추기위해 0을 붙인다.
     * @param   num     앞에 0을 붙일 숫자 값
     * @param   digit   글자의 자릿수를 지정 ( 2자릿수인 경우 00, 3자릿수인 경우 000 … )
     */
    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>
<table class="scriptCalendar">
    <thead>
        <tr>
            <td onClick="prevCalendar();" style="cursor:pointer;"><<</td>
            <td colspan="5">
                <span id="calYear">YYYY</span>년
                <span id="calMonth">MM</span>월
            </td>
            <td onClick="nextCalendar();" style="cursor:pointer;">>></td>
        </tr>
        <tr>
            <td>일</td><td>월</td><td>화</td><td>수</td><td>목</td><td>금</td><td>토</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>
</body>
</html>

위 코드를 실행해 보면 결과가 아래와 같음을 확인 해 볼 수 있다.

# 출력결과

저작자표시

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

[JavaScript] (0)	2020.09.09
[JavaScript] 자바스크립트로 HWP 파일 제어 (0)	2020.09.07
[JavaScript] SelectBox를 사용하는 날짜 검색창 제작 (0)	2020.07.12
[JavaScript] 매월의 월요일 기준, 주차 구하기 (4)	2020.06.29
[JavaScript] Table을 Excel 처럼 즉시 수정가능하게 만들기 (1)	2020.06.24

Prev Next

1 2 3 4 ··· 11

'모듈'에 해당되는 글 43건

[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입[JavaScript] 날짜 형식에 하이픈(-)기호 자동 삽입

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

[JavaScript] 입력 텍스트값 Byte 체크[JavaScript] 입력 텍스트값 Byte 체크

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

[jQuery] TextBox에서 다중 선택 기능 제작[jQuery] TextBox에서 다중 선택 기능 제작

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

[JavaScript] 자바스크립트를 이용한 캘린더 제작[JavaScript] 자바스크립트를 이용한 캘린더 제작

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

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바