HTML js - 입력 제한 처리(실습)200602

HTML

by 기련이 2020. 6. 2. 17:23

입력시10글자이내로만 글자 입력가능

5자부터 - 주황색

10자는 - 빨간색

11자부터 입력 불가

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>입력 제한 처리</title>
</head>
<body>
입력한 값 : <span></span>
<br>
<input type="text" value=""><span>(0자 입력)</span>
</body>
<script type="text/javascript">
var spans = document.getElementsByTagName('span');
var txt = document.getElementsByTagName('input');

txt[0].addEventListener('keyup', function(){
	var val = txt[0].value;//입력값 가져오기
	console.log(val);
	if(val.length >= 0 && val.length <6){
		txt[0].style.color='black';
		spans[1].style.color='black';
	}
	if(val.length >= 5 && val.length < 10){
		txt[0].style.color='orange';
		spans[1].style.color='orange';
	}
	if(val.length >= 10){
		txt[0].style.color='red';
		spans[1].style.color='red';
	}
	
	if(val.length >= 11){
		val = val.substring(0, 10);
		alert("더 이상 입력할 수 없습니다.");
		txt[0].value = val;//잘린 10글자를 다시 출력.
		spans[0].value = val;
	}
	
	spans[0].innerHTML = val;
	spans[0].innerHTML = '(' + val.length + '자 입력';
});
	
</script>

</html>

'HTML' 카테고리의 다른 글

HTML js - 자바스크립트 입출력(in-out) (0)	2020.06.02
HTML 예제 (0)	2020.05.18
HTML 배경 이미지 (0)	2020.05.18
HTML - visibility , display (0)	2020.05.18
HTML 투명도 조절 (0)	2020.05.18