정해진 글자수 자르기 제한 웹페이지 만들기

예제로 만든 실제 페이지 확인(글자수자르기)

1. 사용자가 글자를 입력할 textarea html을 만든다.

추후 자바스크립트와 연동할 id와 onkeydown 속성을 추가한다.

<textarea id="textarea_100" onkeydown="counter_100();"></textarea>

2. 텍스트 입력시 올라가는 글자수 카운터와, 제한 글자수를 표현할 span을 만든다.

마찬가지 Javascript와 연동할 id 속성 추가.

<span id="count_100">(0/100)</span>

3. 위에서 만든 html과 연동할 자바스크립트 코드

textarea_100 안에 글자가 100자를 넘기면 더이상 글자를 추가하는걸 제한하고, 텍스트 입력시 변화하는 카운터를 count_100 에 실시간으로 반영하는 스크립트

<script>
function counter_100() {
	var content = document.getElementById('textarea_100').value;
	if (content.length > 100) {
		content = content.substring(0,100);
		document.getElementById('textarea_100').value = content;
	}
	document.getElementById('count_100').innerHTML = '(' + content.length + '/100)';
}
counter_100();
</script>

4. 모두 합친 코드와 응용한 결과물

<textarea id="textarea_100" onkeydown="counter_100();"></textarea>
<span id="count_100">(0/100)</span>

<script>
function counter_100() {
	var content = document.getElementById('textarea_100').value;
	if (content.length > 100) {
		content = content.substring(0,100);
		document.getElementById('textarea_100').value = content;
	}
	document.getElementById('count_100').innerHTML = '(' + content.length + '/100)';
}
counter_100();
</script>

써보면 직접 타이핑을 해도 알아서 막히고, 텍스트를 붙여넣어도 그 다음 액션 아무 키나 누르면 최대 수대로 잘려서 편함.

글자수를 붙여넣어 자르는 용도는 텍스트 에어리어가 좁은게 더 편하고

실제로 유저가 타이핑 해가며 글자수를 체크하기엔 좀 더 넓은게 편함.