개발자 구겹이

글자수세기 javaScript 본문

javascript

글자수세기 javaScript

@layers9 2024. 9. 17. 18:28

 

 

 

 

 

 

 

자바스크립트로 글자수세기 출력 만들어주기 

 

 

 

사용자의 재미와 알권리의 질을 향상시키주기 프로젝티 ㅎㅎ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

사용자의 데이터를 임의적으로 끊어서 출력을 해주는 방법이 있겠지만,

사용자가 입력을 해주는 골든타임에 

 

 

 

"

너가 이만큼 입력했고,

우린 이까지의 데이터만을 받아줄거야

"

 

 

를 명시적으로

알려주기 위해

 

 

 

글자수세기 자바스크립트를 만들어주기로 해요.

사실 제 과제 중에 하나가 이거 였네요.

 

 

네이버 글자수세기 / maxlength 적용시켜주기 전의 출력물

 

 

 

 

 

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>  

 

 

 

 

 

 

 

 

 

느낌을 가져가시오

 

 

 

바이바이