키보드관련//글자수세기

<h3>키보드 관련 이벤트</h3>

    <p>

        keydown : 키가 눌렸을 때 <br>

        keypress : 키가 눌리는 동안 <br>

        keyup : 키에서 손을 떼었을때

    </p>

     연습 : <input type="text" id="test2"><br>

     <span id="result">0</span>

     <script>

        //keydown/ keypress / keyup

        $('#test2').on('keyup',function(){

            var cnt = $(this).val().length;

            console.log(cnt);

            $('#result').text(cnt);

         });

     </script>

 

<script>

        //keydown/ keypress / keyup

        $('#test2').on('keyup',function(){

            var cnt = $(this).val().length;

            console.log(cnt);

            $('#result').text(cnt);

         });

     </script>

    <h3>동적 글자수 세기</h3>

    <div>

        <h1 id="counter">100</h1>

        <textarea id="contents" cols="70" rows="4"></textarea>

    </div>

    <script>

        $('#contents').on('keyup',function(){

            var words=$(this).val().length;

            var remain=100-words;

            $('#counter').html(remain);

            if(remain<0) {

                $('#counter').css('color','red');

            }else if(remain<11){

                $('#counter').css('color','blue');

            }else{

                $('#counter').css('color','black');

            }

        });

    </script>