반응형
250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Java
- 이메일유효성검사
- select
- vue 사진미리보기
- 구글폰트다운받아사용
- vue3 데이터보내기
- VUE
- 클래스지우기
- 자바변수선언
- 슬라이드한번에세개
- nodejs
- class지우기
- 엑셀
- 컴포넌트간 데이터보내기
- 상위컴포넌트에서 하위컴포넌트로 데이터 전달
- Node
- <script setup>
- 연산자
- 뷰
- vue3 props
- vue3emit
- vue슬라이드
- 슬라이드기능구현
- vue3
- jsp
- vue이미지자르기
- javascript
- 미리보기
- vueper slides
- vueperslides
Archives
- Today
- Total
orange056
[javascript] 글자수 카운팅하기 본문
728x90
반응형
오늘은 웹페이지 제작 중 글자수 카운팅 하는 기능을 구현해봤다
<ul class="sec-tion">
<li>
<label for="comment" class="lab"><strong>댓글</strong></label>
<textarea name="comment" id="comment" cols="30" rows="10" placeholder="20자 이상 적어주세요"></textarea>
</li>
</ul>
<span style="color:#aaa;" id="counter">(0 / 100)</span>
우선 html 코드이다
<script>
$('#comment').keyup(function (e){
var content = $(this).val();
$('#counter').html("("+content.length+" / 100)"); //글자수 실시간 카운팅
if (content.length > 100){
alert("최대 100자까지 입력 가능합니다.");
$(this).val(content.substring(0, 100));
$('#counter').html("(100 / 100)");
}
});
</script>
다음으로 스크립트 코드이다
실시간으로 글자를 카운팅해주고 100자가 넘어가면 알림창을 띄워준다
728x90
반응형
'javascript' 카테고리의 다른 글
[javascript] input태그 특수문자 입력 방지 (0) | 2021.09.08 |
---|---|
[javascript] a태그로 form 태그 submit 하기 (0) | 2021.09.07 |
[javascript] 윈도우 창 닫을 때 경고창 띄우기 (0) | 2021.08.26 |
[javascript] input type=file 미리보기 기능 구현 (0) | 2021.08.11 |
[javascript] 모달창에 페이지 띄우기 (0) | 2021.08.11 |
Comments