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>