193
No
자바스크립트(Javascript) 글자수 체크하는 방법
입력란에 글자수를 제한하는 방법입니다. Object 의 length 함수로 해결할 수가 없습니다. 영어와 한글의 바이트 수가 틀리기 때문입니다. 한글은 2바이트, 영어는 1바이트 입니다. 입력란에 길이 값을 영어는 1, 한글은 2로 계산해서 초가 하지 못하도록 제한하는 방법에 대해 알아 보겠습니다.
▼ 먼저 input 박스에 입력한 값을 charAt() 함수로 한자씩 분리할 것입니다. for 문을 돌려 하나씩 분석하는데 아스키값이 아닌 유니코드이면 길이 2로 계산하고 아스키값이면 1로 합니다. 그말은 2바이트를 사용하는 문자냐 아니냐를 escape() 함수로 판단하는 것입니다. escape() 는 한글일때 16진수형태로 변환해주기 때문에 length 가 6 이 됩니다. 예를 들어 %u2345 같이 되는 것이죠.
for (var i = 0; i < strLen; i++) {
oneChar = strValue.charAt(i);
if (escape(oneChar).length > 4) {
totalByte += 2;
} else {
totalByte++;
}
// 입력한 문자 길이보다 넘치면 잘라내기 위해 저장
if (totalByte <= maxByte) {
len = i + 1;
}
}
▼ 두번째 단락에서는 제한하는 숫자보다 입력한 값이 큰지 판단하게 됩니다. 크다면 입력 가능한 크기인 len 만큼 substr() 함수를 사용해서 자르게 됩니다. 자른 값은 input 에 obj.value = str2 로 입력합니다.
// 넘어가는 글자는 자른다.
if (totalByte > maxByte) {
alert(maxByte + "자를 초과 입력 할 수 없습니다.");
str2 = strValue.substr(0, len);
obj.value = str2;
chkword(obj, 4000);
}
▼ 아래 소스는 input 박스에 입력할 글자를 제한하는 함수의 전체 소스입니다. input 박스에서 onkeyup 이벤트가 발생할때 글자수 체크하는 함수 chkword() 을 실행하게 됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>ID 값 전송</title>
<script type="text/javascript">
function chkword(obj, maxByte) {
var strValue = obj.value;
var strLen = strValue.length;
var totalByte = 0;
var len = 0;
var oneChar = "";
var str2 = "";
for (var i = 0; i < strLen; i++) {
oneChar = strValue.charAt(i);
if (escape(oneChar).length > 4) {
totalByte += 2;
} else {
totalByte++;
}
// 입력한 문자 길이보다 넘치면 잘라내기 위해 저장
if (totalByte <= maxByte) {
len = i + 1;
}
}
// 넘어가는 글자는 자른다.
if (totalByte > maxByte) {
alert(maxByte + "자를 초과 입력 할 수 없습니다.");
str2 = strValue.substr(0, len);
obj.value = str2;
chkword(obj, 4000);
}
}
</script>
</head>
<body>
<input type="text" id="byteInfo" name="title"
onkeyup="chkword(this, 5)" />
</body>
</html>
댓글 ( 6)
댓글 남기기