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 'others' 카테고리의 다른 글
| facebook note에 있던 잡다한것들.. (0) | 2013.06.03 |
|---|---|
| JSON Object 정렬하기 (0) | 2012.01.30 |
| Velocity에서의 Map 사용 (0) | 2009.11.24 |
| 자바스크립트 체크박스 관련 (0) | 2009.07.30 |
| browser의 layout engine (0) | 2009.06.17 |