![[JavaScript] 입력한 텍스트의 문자길이 체크](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FwVmIB%2FbtrZhSpfCB7%2FZETsGcYfjf97PPS9877VHk%2Fimg.jpg)
728x90
Chapter#01. [JavaScript] 입력한 텍스트의 문자길이 체크
Chapter#02. [JavaScript] 입력한 텍스트의 Byte 체크
트위터는 한국, 일본, 중국에서 글자수 길이를 140자로 제한하고 있다.
Web 프로그램을 만들때도 문자 길이의 입력을 제한하는 경우가 종종 있어 정리 해둔다.
# 소스코드
<html>
<head>
<title>:: JavaScript 문자길이 체크하기 ::</title>
</head>
<style type="text/css">
.writeText { width:99%;height:100px;resize:none; }
.textLength { font-weight:bold;color:#FF0000; }
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("writeText").addEventListener("keyup", function (event) {
inputLimitLengthChecked(event.target);
});
});
// @see 설정된 문자길이를 넘어서지 못하게 체크하는 함수
function inputLimitLengthChecked(obj) {
if (obj.value.length > obj.dataset.length) {
alert("작성할 수 있는 텍스트의 글자수가 입력 범위를 초과하였습니다.");
obj.value = obj.value.substr(0, obj.dataset.length);
} else {
document.getElementsByClassName("textLength")[0].innerText = obj.value.length;
}
}
</script>
<body>
<h1>■ 입력 텍스트의 문자길이 체크</h1>
<textarea class="writeText" id="writeText" data-length="140"></textarea>
<p><span class="textLength">0</span> 자 입니다.</p>
</body>
</html>
# 출력결과
■ 입력 텍스트의 문자길이 체크
0 자 입니다.
728x90
'JavaScript' 카테고리의 다른 글
| [JavaScript] 체크박스를 이용한 백분율 선택 (0) | 2023.05.24 |
|---|---|
| [JavaScript] 입력한 텍스트의 Byte 체크 (0) | 2023.02.14 |
| [JavaScript] 휴대폰 번호 Hyphen(-) 삽입 형식 자동 입력폼 (0) | 2022.12.26 |
| [JavaScript] 자바스크립트를 이용한 캘린더 제작 (8) | 2022.12.23 |
| [JavaScript] UTC값을 YYYY-MM-DD 형식으로 변경하기 (0) | 2022.05.24 |