jQuery - textarea byte check

Development/jQuery

jQuery - textarea byte check

linuxism 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>

<!--

$(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>

</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>

<head>

<title>CHECK BYTE TEST</title>

$(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>

</div>

<div>

<span id="indicator">0</span>/160bytes

</div>

<div>

</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

저작자표시