jQuery - textarea byte check

Development/jQuery 2012. 7. 24. 15:40


function byteCheck() {

        var str = jQuery('.z_border').val();
        var size = 0;
        for(var i=0;i<str.length;i++) {

            size++;
            if(44032 <str.charCodeAt(i) && str.charCodeAt(i) <=  55203) { // hangul Syliables
                size++;
            }
            if(12593 <= str.charCodeAt(i) && str.charCodeAt(i) <= 12686 ) {
                size++;
            }
        }

        if(size > 100) {
            size = 100;
            jQuery('.z_border').val(jQuery('.z_border').val().substring(0,100));
        }

        jQuery('#byteLength').html(size);
    }


출처 - http://magefister.egloos.com/1907679


===================================================================================


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Help</title>


<Script>

<!--

$(function () {

    $('.remaining').each(function () {

        // count 정보 및 count 정보와 관련된 textarea/input 요소를 찾아내서 변수에 저장한다.

        var $count = $('.count', this);

        var $input = $(this).prev();

        

        // .text()가 문자열을 반환하기에 이 문자를 숫자로 만들기 위해 1을 곱한다.

        var maximumCount = $count.text() * 1;

        

        // update 함수는 keyup, paste, input 이벤트에서 호출한다.

        var update = function () {

            var before = $count.text() * 1;

            var now = maximumCount - $input.val().length;

        

            // 사용자가 입력한 값이 제한 값을 초과하는지를 검사한다.

            if (now < 0) {

                var str = $input.val();

                alert('글자 입력수가 초과하였습니다.');

                $input.val(str.substr(0, maximumCount));

                now = 0;

            }

        

            // 필요한 경우 DOM을 수정한다.

            if (before != now) {

                $count.text(now);

            }

        };

        

        // input, keyup, paste 이벤트와 update 함수를 바인드한다

        $input.bind('input keyup paste', function () { setTimeout(update, 0) });

        update();

    });

});

//-->

</Script>

</head>

<body>


<TEXTAREA id="contentHelp"></TEXTAREA>

<DIV class="remaining">남은 글자수: <SPAN class="count">10</SPAN></DIV>


</body>

</html>


출처 - http://burchurl.egloos.com/2264355


===================================================================================


 sms를 보내는 프로그램을 작성중 80byte로 자르는 script가 필요해서 작성한건데
처음 만들고 테스트 해보던 중 문제가 생긴게 firefox에서는 한글 입력시 keyup 이벤트가 발생이 안하는 문제가 생겼다. 
삽질결과 다른 플러그인을 활용해서 해결!
다른 플러그인은 jquery.textchange.js이고 주소는 http://www.zurb.com/playground/jquery-text-change-custom-event 이다. 플러그인이 간단한데 동작원리는 jQuery 실력이 부족하니 이해가 아직 안된다. 

jquery.checkbyte.min.js



다음은 테스트한 javascript 소스이다.

/*
 * Check Byte - jQuery plugin for checking byte v1.1 (2011-11-11)
 * jquery.checkbyte.js
 * code by francis lee depend on jquery.textchange.js with jQuery v1.6.4
 */
(function($) {

/**
* name checkbyte 
* param options{} 
*     indicator : jquery object, 숫자표시하는 영역 
*         limit : number, 체크할 바이트수 
*         twice : boolean, 2건 체크 여부 예제
* $("#message").checkbyte({indicator:$("#indicator")});
* $("#message").checkbyte({indicator:$("#indicator"), limit:100,
* twice:false});
*/
$.fn.checkbyte = function(options) {
// 기본값 정의
var settings = {
indicator : $("#indicator"),
limit : 80,
twice : false
};
// options 존재하면 options를 setting에 merge
if (options) {
$.extend(settings, options);
}
;
// chainability 유지
return this.each(function() {
// 객체자신
var $this = $(this);
// firefox, opera는 한글입력시 keyup, keypress 같은 event 감지가 안됨
if ($.browser.mozilla || $.browser.opera) {
$this.bind("textchange", function(event, previousText) {
$.check($this, settings.indicator,
parseInt(settings.limit), settings.twice);
});
} else {
$this.bind("keyup", function(event) {
// $this.bind("keyup focus", function(event){
// alert(event.type);
$.check($this, settings.indicator,
parseInt(settings.limit), settings.twice);
});
}
});
};
// 문자열을 해당하는 길이만큼 자르는 함수
$.limitString = function(str, limit) {
var tempStr = new String(str);
var len = 0;
for ( var i = 0; i < str.length; i++) {
var c = escape(str.charAt(i));
if (c.length == 1)
len++;
else if (c.indexOf("%u") != -1)
len += 2;
else if (c.indexOf("%") != -1)
len += c.length / 3;
if (len > limit) {
tempStr = tempStr.substring(0, i);
break;
}
}
return tempStr;
};

// 문자열의 바이트수를 계산하는 함수
$.byteString = function(str) {
var len = 0;
for ( var i = 0; i < str.length; i++) {
var c = escape(str.charAt(i));
if (c.length == 1)
len++;
else if (c.indexOf("%u") != -1)
len += 2;
else if (c.indexOf("%") != -1)
len += c.length / 3;
}
return len;
};

// 160byte이상 입력 유무
var continued = false;

// check(입력object 표시 object, 제한건수, 2건여부)
$.check = function(input, indicator, limit, twice) {
// 문자열의 길이를 구함
var len = $.byteString(input.val());
// 두건보내기가 true라면
if (twice) {
// limit 체크를 한번도 한적이 없다면
if (continued == false) {
if (len > limit) {
// 길이가 limit를 넘으면 confirm
if (confirm("메세지 내용이 " + limit
+ "byte를 넘으면 문자메세지는 2건으로 전송됩니다. 계속 하시겠습니까?")) {
continued = true;
} else {
// limit까지 짤라서 대상 객체에 넣기
// To set or get the text value of input or textarea
// elements, use the .val() method.
input.val($.limitString(input.val(), limit));
}
}
}
// limit*2보다 크면 제한
if (len > (limit * 2)) {
alert("메시지 내용은 " + (limit * 2)
+ "byte를 넘을수 없습니다. 초과된 부분은 자동으로 삭제됩니다.");
// (limit * 2)까지 짤라서 대상 객체에 넣기
input.val($.limitString(input.val(), (limit * 2)));
}
} else {
if (len > limit) {
alert("메시지 내용은 " + limit
+ "byte를 넘을수 없습니다. 초과된 부분은 자동으로 삭제됩니다.");
// limit까지 짤라서 대상 객체에 넣기
input.val($.limitString(input.val(), limit));
}
}
// indicator 표시
indicator.html($.byteString(input.val()));
};

})(jQuery);


html  소스

<!DOCTYPE html> 
<html lang="ko">
<head> 
<meta charset="utf-8">
<title>CHECK BYTE TEST</title>
<link type="text/css" rel="stylesheet" media="screen" href="/css/style.css"/>
<script type="text/javascript" src="/js/jquery-1.6.4.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/js/jquery.checkbyte.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/js/jquery.textchange.min.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
$(document).ready(function(){

//브라우저 체크
$.each(jQuery.browser, function(i, val) {
$("<div>" + i + " : <span>" + val + "</span>").prependTo(document.body);
});
$("#message").checkbyte({
indicator:$("#indicator"),
limit:80,
twice:true
});

$("#characterHandler").click(function(){
$("#message").val($("#message").val() + "^^;")
.focus()
.trigger("keyup");  
});
});
</script>
</head>
<body>
<div>
<textarea id="message" rows="10" cols="50"></textarea>
</div>
<div>
<span id="indicator">0</span>/160bytes
</div> 
<div>
<input type="button" id="characterHandler" value="character" />
</div>
</body>
</html> 





테스트한 브라우저 버전
Explorer 6.0.2900.5512
Explorer 7.0.5730.13 
Explorer 8.0.6001.18702
Explorer 9.0.8112.16421
Firefox 8.0
Chrome 15.0.874.120 m
Safari 5.1.1 (7534.51.22)
Opera 11.52 


출처 - http://aircook.tistory.com/100




저작자표시

'Development > jQuery' 카테고리의 다른 글

jQuery - History/Back Button plugins  (0) 2013.06.25
jquery - 메소드 정리  (0) 2012.11.01
jquery - change 이벤트 select 예제  (0) 2012.06.21
jquery ajax pagination 예제  (0) 2012.06.16
jQuery UI CSS Framework 3 - ibm  (0) 2012.06.09
Posted by linuxism
,

티스토리툴바