<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 자기소개서 </title>
<!-- css파일을 불러오는 코드 -->
<!--icon을 사용하기 위한 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>
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
$(function(){
$(".form-input").on("input",function(){
//var content=this.value;//js
var content=$(this).val();//jquery
// $(this).next().text(content.length);
$(this).next(".form-input-length").text(content.length);
if(content.length>1000){
// this.nextElementSibling.classList.add("red");
$(this).next(".form-input-length").addClass("red");
}
else{
// this.nextElementSibling.classList.remove("red");
$(this).next(".form-input-length").removeClass("red");
}
});
});
</script>
</head>
<body>
<div class="container w-500">
<div class="row">
<h1>자기소개서</h1>
</div>
<div class="row">
<h2>(Q) 본인 성격의 장단점을 기술하시오.</h2>
</div>
<div class="row right">
<textarea class="form-input w-100"></textarea>
<span class="form-input-length">0</span>/ 1000
</div>
<div class="row">
<h2>(Q) 입사 후 20년 뒤의 나의 모습은?</h2>
</div>
<div class="row right">
<textarea class="form-input w-100"></textarea>
<span class="form-input-length">0</span>/ 1000
</div>
<div class="row">
<button class="btn btn-positive w-100">제출하기</button>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 체크박스 제어(JQuery) (0) | 2023.10.23 |
|---|---|
| 회원가입(JQuery) input이벤트를 활용한. (0) | 2023.10.18 |
| input이벤트 (0) | 2023.10.16 |
| 사진 크기 조절 (jQuery) (0) | 2023.10.13 |
| 색상 변경 예제(jQuery) (0) | 2023.10.12 |