JS实现表单输入放大效果

 如下图是往表单内输入字体，而在上方的盒子内实现放大的效果。

代码如下：

html：

<div class="search">
        <div class="con">&nbsp;</div>
        <input type="text" placeholder="输入号码" class="text">
    </div>

css：

<style type="text/css">
        .search {
            margin: 100px auto;
            width: 200px;
            height: 100px;
            border: 1px solid rgb(91, 66, 218);
            position: relative;
        }
        
        .con {
            display: none;
            position: absolute;
            width: 170px;
            top: 5px;
            left: 20px;
            border: 1px solid darkslategrey;
            box-shadow: 0 2px 4px rgb(0, 0, 0);
            font-size: larger;
        }
        /* 制作盒子下方的倒三角 */
        
        .con::before {
            top: 21px;
            left: 13px;
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            border: 8px dashed darkslategrey;
            border-color: rgb(255, 255, 255) transparent transparent;
        }
        
        .text {
            position: absolute;
            top: 40px;
            left: 20px;
        }
    </style>

css中有倒三角的制作，大家可以参考一下。

JS代码：

<script>
        window.onload = function() {
            var text = document.querySelector(".text");
            var con = document.querySelector(".con");

            // 获取焦点时，上方盒子出现
            text.addEventListener("focus", function() {
                con.style.display = "block";
            })

            // 失去焦点时，上方盒子消失
            text.addEventListener("blur", function() {
                con.style.display = "none";
            })

            // 将文本框的内容给到盒子内容
            text.addEventListener("keyup", function() {
                con.innerHTML = this.value;

                // 当文本框无内容时，盒子内也应没有内容
                if (this.value == "") {
                    con.innerHTML = "&nbsp;";
                }
            })
            document.addEventListener("keyup", function(e) {
                console.log(e.keyCode);
                // 当按下s键时，使文本框获取焦点
                if (e.keyCode === 83) {
                    text.focus();
                }
                // 当按下回车键时，使文本框失去焦点
                if (e.keyCode === 13) {
                    text.blur()
                }
            })
        };
    </script>

个人觉得JS代码非常直观，有助于新手理解。这是一个非常容易实现的功能。大家可以多多指错。