textarea에 글자를 입력받을 때 최대 N자까지만 입력 가능하게 하고 싶을 때가 있습니다. 오늘은 100자까지만 입력 가능하게 하는 코드를 소개해드리겠습니다. 입력 가능 자수는 각자 필요에 따라 100을 200, 300, 1000등으로 바꿔서 쓰시면 되겠습니다.
우선 필요한 html 코드는 다음과 같습니다.
|
1
2
|
<textarea id="test" name="test" cols="30" rows="10"></textarea>
<div id="test_cnt">(0 / 100)</div>
|
cs |
또한 javascript 코드는 다음과 같습니다. 흐름을 대략적으로 설명해드리면, textarea에 커서를 놓고 타이핑을 하면, 글자 수를 읽어낸 것을 (0 / 100) 부분의 0에 대입을 시켜서 바꿔서 보이게 합니다. 또한 글자수가 100개가 넘으면 문자열을 처음부터 100자까지만 짤라내고, (0 / 100)은 (100 / 100)으로 보이게 합니다.
|
1
2
3
4
5
6
7
8
9
10
|
$(document).ready(function() {
$('#test').on('keyup', function() {
$('#test_cnt').html("("+$(this).val().length+" / 100)");
if($(this).val().length > 100) {
$(this).val($(this).val().substring(0, 100));
$('#test_cnt').html("(100 / 100)");
}
});
});
|
cs |
그러면 실행 결과를 한 번 보시겠습니다.
전체 코드는 다음과 같습니다. 보시는 것과 같이 제이쿼리를 이용하는 것이기 때문에 head 부분에서 제이쿼리를 꼭 불러와줘야 합니다.
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--제이쿼리-->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body>
<textarea id="test" name="test" cols="30" rows="10"></textarea>
<div id="test_cnt">(0 / 100)</div>
<script>
$(document).ready(function() {
$('#test').on('keyup', function() {
$('#test_cnt').html("("+$(this).val().length+" / 100)");
if($(this).val().length > 100) {
$(this).val($(this).val().substring(0, 100));
$('#test_cnt').html("(100 / 100)");
}
});
});
</script>
</body>
</html>
|
cs |
'Dev > javascript' 카테고리의 다른 글
| [javascript] textarea에 기록된 내용 지우기 (6) | 2020.12.14 |
|---|---|
| [jquery] css() 메서드로 css 속성 추가하기 (6) | 2020.12.12 |
| [jquery] html 메서드 정리 (0) | 2020.12.11 |
| [javascript] 정의와 동시에 호출이 가능한 즉시실행함수 (0) | 2020.12.10 |
| [javascript] checkbox 체크되었을 때 1, 안 되었을 때 0을 제출하고 싶다면 (11) | 2020.12.08 |
| [javascript] 자료형을 알고 싶다면 typeof (0) | 2020.12.04 |
| [javascript] 숫자를 문자열로 바꿔주는 String 함수와 toString 메서드 (0) | 2020.12.04 |
| javascript를 이용해서 웹에서 오디오 재생하기(+무한재생) (4) | 2020.06.02 |