js将输入的字体放大显示案例

js将输入的字体放大显示案例

    <!-- 
        案例分析：
        1、快递单号输入内容时，上面的大号字体盒子（ con ）显示 这里面的文字
        2、同时把快递单号里面的值（value）获取过来赋值给con盒子 （innerText）作为内容
        3、如果快递单号里面内容为空，则隐藏大号字体盒子 （ con ） 盒子
        4、注意：keydown 和 keypress 在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框中，
           因为按下没松开，事件就会一直触发，可以只有松开字体才会落入文本框中
        5、keyup事件触发的时候，文字已经落入文本框里面了
        6、当我们失去焦点，就隐藏这个con盒子
        7、当我们获得焦点，并且文本框内容不为空，就显示这个con盒子
     -->

     <style>
         .con{
             width: 400px;
             height: 60px;
             font-size: 24px;
             display: none;
             border: solid 1px rgba(0, 0, 0, .6);
             margin-bottom: 20px;
         }

         .jd{
             font-size: 16px;
         }
         
     </style>

     <div class="con"></div>
     <input type="text" class="jd">

     <script>
         var con = document.querySelector('.con');
         var jd_input = document.querySelector('.jd');
         jd_input.addEventListener('keyup', function(){
             if(this.value == ''){
                 con.style.display = 'none';
             }else{
                 con.style.display = 'block';
                 con.innerText = this.value;
             }
         })
        //  当我们失去焦点，就隐藏这个con盒子
        jd_input.addEventListener('blur', function(){
            con.style.display = 'none';
        })
        //  当我们获得焦点，就显示这个con盒子
        jd_input.addEventListener('focus', function(){
            if(this.value !== ''){
                con.style.display = 'block';
            }         
        })
     </script>