zoukankan      html  css  js  c++  java
  • js_输入框上面的大号字体显示框

     1 <!DOCTYPE html>
     2 <html lang="en">
     3   <head>
     4     <meta charset="UTF-8" />
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     7     <title>Document</title>
     8     <style>
     9       * {
    10         margin: 0;
    11         padding: 0;
    12       }
    13 
    14       .search {
    15         position: relative;
    16         /*  178px; */
    17         margin: 100px;
    18       }
    19 
    20       .con {
    21         display: none;
    22         position: absolute;
    23         top: -40px;
    24         /*  171px; */
    25         border: 1px solid rgba(0, 0, 0, 0.2);
    26         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    27         padding: 5px 0;
    28         font-size: 18px;
    29         line-height: 20px;
    30         color: #333;
    31       }
    32 
    33       .con::before {
    34         content: '';
    35          0;
    36         height: 0;
    37         position: absolute;
    38         top: 28px;
    39         left: 18px;
    40         border: 8px solid #000;
    41         border-style: solid dashed dashed;
    42         border-color: #fff transparent transparent;
    43       }
    44     </style>
    45   </head>
    46 
    47   <body>
    48     <div class="search">
    49       <div class="con">123</div>
    50       <input type="text" placeholder="请输入您的快递单号" class="jd" />
    51     </div>
    52     <script>
    53       // 快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大)
    54       // 表单检测用户输入: 给表单添加键盘事件
    55       // 同时把快递单号里面的值(value)获取过来赋值给 con盒子(innerText)做为内容
    56       // 如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子
    57       var con = document.querySelector('.con')
    58       var jd_input = document.querySelector('.jd')
    59       //添加监听事件,keyup,不能用其他,因为当用keydown时,程序先执行,里面的内容为空,
    60       jd_input.addEventListener('keyup', function () {
    61         // 判断输入框的值是否为空,如果不为空,再显示输入框
    62         if (jd_input.value == '') {
    63           con.style.display = 'none'
    64         } else {
    65           con.style.display = 'block'
    66           con.innerHTML = jd_input.value
    67         }
    68       })
    69       //失去焦点隐藏上面的大号字体显示框;
    70       jd_input.addEventListener('blur', function () {
    71         con.style.display = 'none'
    72       })
    73       //获得焦点显示上面的大号字体显示框;
    74       jd_input.addEventListener('focus', function () {
    75         //如果输入框里面的值不为空时,再显示,如果为空就隐藏
    76         if (this.value !== '') {
    77           con.style.display = 'block'
    78         }
    79       })
    80     </script>
    81   </body>
    82 </html>
    时间如白驹过隙,忽然而已,且行且珍惜......
  • 相关阅读:
    STL源码剖析之_allocate函数
    PAT 1018. Public Bike Management
    PAT 1016. Phone Bills
    PAT 1012. The Best Rank
    PAT 1014. Waiting in Line
    PAT 1026. Table Tennis
    PAT 1017. Queueing at Bank
    STL源码剖析之list的sort函数实现
    吃到鸡蛋好吃,看看是哪只母鸡下的蛋:好用的Sqlite3
    cJSON
  • 原文地址:https://www.cnblogs.com/UnfetteredMan/p/13617400.html
Copyright © 2011-2022 走看看