728x90
반응형
See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.
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 32 33 34 35 36 37 38 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> </style> <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function(){ $('textarea').keyup(function(){ var inputLength = $(this).val().length; var remain = 10 - inputLength; $('h1').html(remain); if (remain > 0) { $('h1').css('color', 'blue'); } else if (remain === 0) { $('h1').html(remain + ' 입력 불가').css('color', 'red'); } else { // 백스페이스를 제외한 다른 입력을 막는다. var inputValue = $(this).val(); var newValue = inputValue.slice(0, 10); $(this).val(newValue); } }); }); </script> </head> <body> <h1>10</h1> <textarea rows="2" cols="30"></textarea> </body> </html> | cs |
$('textarea').keyup(function(){ ... });
textarea 요소에서 키보드 이벤트(keyup)를 감지하고 그에 따른 동작을 정의한다.
keydown : 키보드가 눌러지는 순간 발생
keypress : 글자가 입력될때 발생
keyup : 입력후 손가락이 떼어질때 발생
var inputLength = $(this).val().length;
현재 textarea의 값(입력된 텍스트)의 길이를 계산하여 inputLength 변수에 저장한다.
slice(0, 10)
이 메서드는 문자열의 일부분을 추출하거나 잘라내는 데 사용된다.
0: 시작 인덱스
10: 종료 인덱스
이 경우 10은 문자열에서 추출하려는 부분의 끝을 나타낸다.
종료 인덱스는 실제로 추출한 문자열에 포함되지 않는다. 즉, 종료 인덱스 이전까지의 문자가 추출된다.
따라서 inputValue.slice(0, 10)은 inputValue라는 문자열에서 인덱스 0부터 9까지(10 미포함)의 문자를 추출하여
newValue 변수에 저장한다. 이렇게 하면 문자열의 처음 10개 문자가 newValue에 할당된다.
728x90
반응형
'✨ Front-end > jQuery' 카테고리의 다른 글
| [jQuery] prop이용해서 checkbox 전체 체크 선택 및 해제 (0) | 2023.09.07 |
|---|---|
| [jQuery] Click시 만들어 놓은 CSS 스타일 넣어주기 (0) | 2023.09.07 |
| [jQuery] 버튼 hover로 색상변경 addClass, removeClass (0) | 2023.09.04 |
| [jQuery] JSON 표기법, 임시 회원으로 로그인 성공, 실패 처리해보기 (0) | 2023.09.04 |
| [jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크) (0) | 2023.09.04 |
댓글