Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

웹에서 문자 보낼 때 80바이트 이상 못 쓰게 하는 자바스크립트

▷예제

문자 보내기를 웹에서 하게 만들 때, 80바이트 이상 문자를 쓰지 못하게 만들어야 한다. 이런 경우엔 한글 한 글자를 2바이트로 처리해야 하기 때문에 js 처리가 좀 필요하다.

아래가 한글 한 글자를 2바이트 처리해서 길이를 구하는 함수다.

function getTextLength(str) {
    var len = 0;
    for (var i = 0; i < str.length; i++) {
        if (escape(str.charAt(i)).length == 6) {
            len++;
        }
        len++;
    }
    return len;
}

이걸 활용해서 만들면 된다. 나머지는 예제에 있으니 패스. 아래는 예제 전체 코드를 그냥 옮긴 것이다.

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>문자 80바이트 이하로 끊기</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $(document).ready(function () {
        $('.js-sms-content').keyup(function(){
            cut_80(this);
        });

        $('.js-send-sms').click(function(){
            if(getTextLength($('.js-sms-content').val()) > 80){
                alert("문자는 80바이트 이하로 적어 주세요.");
                return false;
            }else{
                alert("문자가 80바이트 이하입니다.");
            }
        });
    });

    /**
     * 한글포함 문자열 길이를 구한다
     */
    function getTextLength(str) {
        var len = 0;
        for (var i = 0; i < str.length; i++) {
            if (escape(str.charAt(i)).length == 6) {
                len++;
            }
            len++;
        }
        return len;
    }

    function cut_80(obj){
        var text = $(obj).val();
        var leng = text.length;
        while(getTextLength(text) > 80){
            leng--;
            text = text.substring(0, leng);
        }
        $(obj).val(text);
        $('.bytes').text(getTextLength(text));
    }
    </script>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10" class="js-sms-content"></textarea>
    <div class="bytes-wrapper">
        <span class="bytes">0</span>bytes
    </div>
    <button class="js-send-sms">확인</button>
</body>
</html>

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다