글자수세기 javaScript
자바스크립트로 글자수세기 출력 만들어주기
사용자의 재미와 알권리의 질을 향상시키주기 프로젝티 ㅎㅎ
사용자의 데이터를 임의적으로 끊어서 출력을 해주는 방법이 있겠지만,
사용자가 입력을 해주는 골든타임에
"
너가 이만큼 입력했고,
우린 이까지의 데이터만을 받아줄거야
"
를 명시적으로
알려주기 위해
글자수세기 자바스크립트를 만들어주기로 해요.
사실 제 과제 중에 하나가 이거 였네요.
1 . 입력 되는 것의 자체를 100자로 제한
input type="text" / textarea에 속성값으로 maxlength="100" 을 줌
<input type="text" maxlength="100" id="title" name="title"/>
2 . maxlength 설정값을 초과하는 때 alert를 통해 사용자가 더 이상의 내용을 저장할 수 없다는 것을 알게 하기
window.onload= function(){
const titleInput = window.getElementById("title");
if( titleInput.value.length >= 100 ){
alert("최대 입력 100자를 초과했습니다.");
}
}
3 . N사의 글자수세기와 같이 조금 더 친절한 사용자경험을 선사하기 위해
실시간 출력 글자수 출력해주기
<body>
<div id="viewcurrnum"> 0 </div>
<script>
window.onload= function(){
const titleInput = window.getElementById("title");
const viewBox = window.getElementById("viewcurrnum");
titleInput.addEventListener('input',function(){
let num = titleInput.value.length;
viewBox.textcontent = num;
if( num >= 100 ){
alert("최대 입력 100자를 초과했습니다.");
}
})
}
</script>
</body>
느낌을 가져가시오
바이바이