2020-12-09 13:59:22

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(0100));
            $('#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(0100));
                $('#test_cnt').html("(100 / 100)");
            }
        });
    });
        
    </script>
 
</body>
</html>
cs