[간단 프로그램] 글자수 제한

✅ 주요 기능

글자 수를 실시간 카운트 하여 글자수가 200글자 초과할 시 더이상 쳐지지 않는 프로그램

 

1. HTML 에서 textarea 값 글자 수 세기

content 변수를 생성하고 ducument 안에 있는 textarea의 값을 불러오기 위해 document.getElementById()메소드를 사용했다.

이후에 .length 속성을 이용하여 value의 글자수를 카운트했다.

var content = document.getElementById('text').value;
// textarea의 id 값을 'text'로 줬음
console.log(content.length);

📍 document.getElementById() : 주어진 문자열과 일치하는 id속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환

 

2. 센 글자수 document 에 표기

document.getElementById()를 통해 카운트를 표기할 요소를 찾은 후 InnerHTML로 현재 textarea에 적힌 값의 문자 길이를 넣어주었다 이후 반복적으로 아래 명렁으를 쓸 수도 있기에 함수로 묶어주었다

function counting() {
    var content = document.getElementById('text').value; 
    document.getElementById('count').innerHTML = `(${content.length} / 200)`;
}

📍 함수: 명령어의 모음(여러 명령어를 묶어서 관리하고 싶을때 사용)

 

3. 글자 쓸때마다 글자 수 카운트

글자를 치는것을 이벤트 글자 수 카운트 하는것을 이벤트 핸들링이라하고 textarea에  onkeydown 속성을 추가하고 함수를 실행했다

<h1>자기소개</h1>
    <div class="wrap">
        <textarea id="text" rows="3" onkeydown="counting()">안녕하세요</textarea>
        <span id="count">(0 / 200)</span>
    </div >

📍 이벤트: 마우스 클릭, 키보드 누름, 값변화, 페이지 로딩 등등의 사건
     이벤트헨들링: 이벤트가 발생하면 실행되는것
📍onkeydown : 키보드 관련 이벤트로 키를 눌렀을때 를 의미한다.

 

4. 글자수 제한

함수 안에 '만약 200자가 넘어간다면 조건'을 달고 .substring() 메소드로 200까지만 자른 뒤 다시 변수 content 안에 넣어줬다.

자른 값을 document.getElementById()을 통해 document 에도 노출되게 해주었다.

function counting() {
    var content = document.getElementById('text').value; 
    if(content.length > 200){
        content = content.substring(0,200);
        document.getElementById('text').value = content;
    }
    document.getElementById('count').innerHTML = `(${content.length} / 200)`;
}

📍.substring() : 특정 문자열을 잘라내여 반환

 

🌟 완성본