jQuery 한글/영어 byte 체크해서 자르기

프로그래밍/HTML & JavaScript|2020. 7. 15. 08:49
반응형

[출처] https://dev.uhoon.co.kr/entry/jQuery-한글영어-byte-체크해서-자르기 [Dev 저장소]

[원문] http://blog.naver.com/yesdouble/130152964039



test.html


<!DOCTYPE html>

<html>
<head>
    <title>한글/영어 byte 체크해서 자르기</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body >
<script type="text/javascript">
    $(function () {
        $('.remaining').each(function () {
            // count 정보 및 count 정보와 관련된 textarea/input 요소를 찾아내서 변수에 저장한다.
            var $maxcount = $('.maxcount', this);
            var $count = $('.count', this);
            var $input = $("#contents");
 
            // .text()가 문자열을 반환하기에 이 문자를 숫자로 만들기 위해 1을 곱한다.
            var maximumByte = $maxcount.text() * 1;
            // update 함수는 keyup, paste, input 이벤트에서 호출한다.
            var update = function () {
                var before = $count.text() * 1;
                var str_len = $input.val().length;
                var cbyte = 0;
                var li_len = 0;
                for (i = 0; i < str_len; i++) {
                    var ls_one_char = $input.val().charAt(i);
                    if (escape(ls_one_char).length > 4) {
                        cbyte += 2; //한글이면 2를 더한다
                    } else {
                        cbyte++; //한글아니면 1을 다한다
                    }
                    if (cbyte <= maximumByte) {
                        li_len = i + 1;
                    }
                }
                // 사용자가 입력한 값이 제한 값을 초과하는지를 검사한다.
                if (parseInt(cbyte) > parseInt(maximumByte)) {
                    alert('허용된 글자수가 초과되었습니다.\r\n\n초과된 부분은 자동으로 삭제됩니다.');
                    var str = $input.val();
                    var str2 = $input.val().substr(0, li_len);
                    $input.val(str2);
                    var cbyte = 0;
                    for (i = 0; i < $input.val().length; i++) {
                        var ls_one_char = $input.val().charAt(i);
                        if (escape(ls_one_char).length > 4) {
                            cbyte += 2; //한글이면 2를 더한다
                        } else {
                            cbyte++; //한글아니면 1을 다한다
                        }
                    }
                }
                $count.text(cbyte);
            };
            // input, keyup, paste 이벤트와 update 함수를 바인드한다
            $input.bind('input keyup keydown paste change', function () {
                setTimeout(update, 0)
            });
            update();
        });
    });
</script>
<div>
<textarea rows="5" cols="50" id="contents"/></textarea>
</div>
<span class="remaining">
    <span class="count">0</span>/<span class="maxcount">80</span>byte(한글 40자, 영어 80자)
</span>
</body>
</html> 



반응형
저작자표시

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

[html] 깜빡이는 글자, 이미지 예제  (0) 2021.06.30
마우스 오버 이미지 미리보기 (썸네일 확인)  (0) 2020.07.22
페이지 로딩 완료 후 alert 출력하기  (0) 2020.07.04
input 찾아보기 스타일 변경 (두가지 스타일 예제)  (0) 2020.07.03
iframe 높이 꽉차게 하기  (0) 2020.07.02

댓글()

티스토리툴바