<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자수 입력제한</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- javascript 작성 공간 -->
<script>
//[1] .form-input의 글자 수를 읽어 .form-input-length에 출력
//[2] 글자수가 초과되는 입력이 이루어지지 않도록 구현
function checkLength() {
var textarea = document.querySelector(".form-input");
//만약에 1000글자가 넘어간다면...?
// -> 1000글자가 될때까지 잘라서 덮어쓰기
// -> IME 방식의 글자들까지 고려하여 처리
if(textarea.value.length > 1000) {
var copy = textarea.value;
while(copy.length > 1000) {
copy = copy.substring(0, copy.length - 1);
}
textarea.value = copy;
}
var span = document.querySelector(".form-input-length");
span.textContent = textarea.value.length;
}
</script>
</head>
<body>
<div class="container w-600">
<div class="row">
<h1>자기소개서</h1>
</div>
<div class="row">
<h2>(Q) 입사 후 20년 뒤의 나의 모습은?</h2>
</div>
<div class="row">
<textarea class="form-input w-100" rows="10"
oninput="checkLength();"></textarea>
</div>
<div class="row right">
<span class="form-input-length">0</span> / 1000
</div>
<div class="row">
<button type="submit" class="btn btn-positive w-100">제출하기</button>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 회원가입 (0) | 2023.09.12 |
|---|---|
| 정규표현식 (0) | 2023.09.11 |
| 글자 크기 조절 (2) | 2023.09.07 |
| 색상 바꾸기 (0) | 2023.09.06 |
| 이벤트(Event) (0) | 2023.09.05 |