欢迎光临
我的个人博客网站

JavaScript输入框放大显示效果


要求:

用户在输入框输入内容时,上面的大号字体盒子con显示(这里面的字号更大)

实现思路:

  1. 表单检测用户输入:给表单添加键盘事件
  2. 同时把快递单号里面的值value获取过来赋值给con盒子innerText做为内容
  3. 如果快递单号里面内容为空,则隐藏大号字体盒子con盒子

代码实现:

HTML:

<div class="search">     <div class="con">123</div>     <input type="text" placeholder="请输入您的快递单号" class="jd"> </div> 

CSS:

* {     margin: 0;     padding: 0; }  .search {     position: relative;     width: 178px;     margin: 100px; }  .con {     display: none;     position: absolute;     top: -40px;     width: 171px;     border: 1px solid rgba(0, 0, 0, .2);     box-shadow: 0 2px 4px rgba(0, 0, 0, .2);     padding: 5px 0;     font-size: 18px;     line-height: 20px;     color: #333; }  .con::before {     content: '';     width: 0;     height: 0;     position: absolute;     top: 28px;     left: 18px;     border: 8px solid #000;     border-style: solid dashed dashed;     border-color: #fff transparent transparent; } 

JS:

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';     } }); 
赞(0) 打赏
未经允许不得转载:张拓的天空 » JavaScript输入框放大显示效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏