반응형
자바스크립트에서 입력란에 글자수를 제한하는 방법입니다. Object 의 length 함수로는 해결할 수가 없습니다. 영어와 한글의 바이트수가 틀리기 때문입니다. 한글은 2바이트, 영어는 1바이트로 다릅니다. 입력란에 길이 값을 영어는 1, 한글은 2로 계산해서 초과하지 못하도록 제한하는 방법을 사용해야 합니다.
▼ 먼저 input 박스에 입력한 값을 charAt() 함수로 하나의 글자를 분리합니다. for 반복문을 돌려 하나씩 분석하는데, 유니코드일 경우 길이를 2로 계산하고, 아스키값일 경우 1로 합니다. 아스키와 유니코드의 판단은 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() 을 실행합니다.
<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>
반응형
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(JavaScript) 웹 소스 테스트 사이트 소개 (0) | 2024.04.05 |
|---|---|
| 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 (0) | 2024.03.20 |
| 자바스크립트 DOM document.write() 함수로 화면에 텍스트를 출력하기 (3) | 2024.02.06 |
| 자바스크립트(Javascript) escape, encodeURI, encodeURIComponent 인코딩 함수 (1) | 2024.01.15 |
| 자바스크립트(Javascript) 문자열에 쓰이는 특수 문자를 기호로 넣는 방법 (1) | 2024.01.06 |
| 자바스크립트 match() 일치하는 문자열 검색 (1) | 2024.01.01 |
| 자바스크립트 replace() 문자열 대체하고 바꾸기 (1) | 2023.12.31 |
| 자바스크립트 trim() 함수 앞뒤 공백 제거 (0) | 2023.12.31 |
