学习笔记：简易实现仿京东搜索框字体放大功能

要实现搜索框字体放大功能，核心思路如下：

1：准备两个盒子，下方盒子是搜索框，上方是放大框（大号字体即可实现）；

代码实现：

<div class="search">
    <div class="con"></div>
    <input type="text" placeholder="请输入您需要搜索的内容" class="jd">
</div>

2：表单检测用户输入：给表单添加键盘事件：

var con = document.querySelector('.con');
var jd=document.querySelector('.jd');
jd.addEventListener('keyup',function (e) {  //检测用户是否输入内容

3：同时把搜索框的值（value）获取过来赋予放大框盒子的内容，这里搜索框的值获取可用：jd.value  放大框的内容可以表示为：con.innerHTML

if (jd.value==''){
    con.style.display='none';

4:如果搜索框内容为空，则隐藏放大框的盒子

}else {
     con.innerHTML=jd.value;
     con.style.display='block';
}
完整代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .search {
            margin: 100px;
            width: 208px;
            position: relative;
        }
        .con {
            position: absolute;
            top: -40px;
            width: 200px;
            height: 30px;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            font-size: 20px;
            display: none;
            box-shadow: 0 2px 4px rgba(0,0,0,.3);
            color: #333;
        }
        .jd {
            width: 200px;
            height: 20px;
            border: 1px solid #ccc;
            font-size: 12px;
        }
        .con::before {
            content: '';
        /*伪元素必写*/
            position: absolute;
            top:30px;
            left: 15px;
            width: 0;
            height: 0;
            border-top: 8px solid #000;
            border-right: 3px solid transparent;
            border-left: 3px solid transparent;
            border-top-color: #ccc;
            /*border: 20px solid red;*/
        }
    </style>
</head>
<body>
<div class="search">
    <div class="con"></div>
    <input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
    //快递单输入内容时，大号字体盒子显示
    //表单检查用户输入时，给表单添加键盘事件
    //把快递单里的值取过来放在大盒子里
    //如果快递单内容为空，隐藏大字号盒子
    var con = document.querySelector('.con');
    var jd=document.querySelector('.jd');
    jd.addEventListener('keyup',function (e) {  //检测用户是否输入内容
       if (jd.value==''){
           con.style.display='none';
       }else {
            con.innerHTML=jd.value;
            con.style.display='block';
       }

    })
</script>
</body>
</html>






posted @ 2020-08-01 11:22  hhslh  阅读(124)  评论(0)    收藏  举报