脚本宝典收集整理的这篇文章主要介绍了javascript实现输入框内容提示及隐藏功能,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
有时输入框较小,希望输入内容后,出现一个有放大输入内容的提示框
实现思路
注意这里是键盘松开事件,不要用键盘按下事件:keydown或keyPress,按下时还没有将打的字录入,键盘松开时,才会录入打的字
代码示例:
<!DOCTYPE htML> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width, inITial-scale=1.0"> <title>模拟京东快递单号查询</title> <style> * { margin: 0; padding: 0; } input { outline-style: none; } .seArch { position: relative; width: 220px; margin: 100px auto; } .info { display: none; position: absolute; top: -40px; left: 0; width: 170px; padding: 5px 0; font-Size: 18px; line-height: 20px; border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0px 2px 4px rgba(0, 0, 0, .2); } .info::before { content: ''; width: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid #000; border-color: #fff transparent transparent; border-style: solid dashed dashed; } </style> </head> <body> <div class="search"> <div class="info">(*´▽`)ノノ</div> <input type="text" class="exPRess" placeholder="请输入要查询的快递单号"> <input type="button" value="查询"> </div> <script> VAR expressNo = document.querySelector('.express'); var info = document.querySelector('.info'); expressNo.addEventListener('keyup', function() { console.LOG(expressNo.value); console.log(info.innerHTML); if (this.value == '') { info.style.display = 'none'; } else { info.style.display = 'block'; info.innerHTML = this.value; } }); // 失去焦点,隐藏盒子 expressNo.addEventListener('blur', function() { info.style.display = 'none'; }) //获得焦点事件,显示盒子 expressNo.addEventListener('focus', function() { if (this.value !== '') { info.style.display = 'block'; } }) </script> </body> </html>
页面效果:
到此这篇关于javascript实现输入框内容提示及隐藏功能的文章就介绍到这了,更多相关js输入框内容提示及隐藏内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的javascript实现输入框内容提示及隐藏功能全部内容,希望文章能够帮你解决javascript实现输入框内容提示及隐藏功能所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。