JavaScript实现智能搜索框

应用场景：1. 搜索框在页面中占据的空间过小，希望无论浏览到什么位置，可以轻易地回到并聚焦搜索框。2. 搜索框里面的文字大小过小，希望能够在上方开辟一块空间放大内容解决思路：1. 对整个页面添加键盘事件keyup类型的侦听器，然后使用e.keyCode属性来获得用户按下的键，如果是s/S，就让搜索框聚焦。2. 对搜索框添加键盘事件keyup类型的侦听器，将搜索框的value赋给放大内容盒子(我用的

CSU迦叶

3126人浏览 · 2021-11-09 10:42:58

CSU迦叶 · 2021-11-09 10:42:58 发布

应用场景：

1. 搜索框在页面中占据的空间过小，希望无论浏览到什么位置，可以轻易地回到并聚焦搜索框。

2. 搜索框里面的文字大小过小，希望能够在上方开辟一块空间放大内容

解决思路：

1. 对整个页面添加键盘事件keyup类型的侦听器，然后使用e.keyCode属性来获得用户按下的键，如果是s/S，就让搜索框聚焦。

2. 对搜索框添加键盘事件keyup类型的侦听器，将搜索框的value赋给放大内容盒子(我用的是<p>标签)的innerText，如果不为空，就将盒子通过style.display:block显示出来。

2补充. 刚刚只是实现了搜索框有内容的时候将其放大，但是当其失去焦点，即使有内容也不应放大，重新获得焦点时如果有内容就放大。

可玩味之处：两个键盘事件都得是keyup而不是keydown或者keypress

效果(请看官脑补动态效果)

代码(css写在style标签内，js写在script标签内)

<!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>
        div p {
            display: none;
            font-size: large;
            background-color: #FFFDE7;
        }
    </style>
</head>
<body>
    <div>
        <p>123</p>
        <input type="text">
        <button>搜索</button>
    </div>
    
</body>
<script>
    var search = document.querySelector('input');
    document.addEventListener('keyup',function(e){
        if(e.keyCode === 83||e.keyCode === 115){
            console.log("keyup:"+e.keyCode);
            search.focus();
        }
    })

    var magnify = search.previousElementSibling;
    console.log(magnify);
    search.addEventListener('keyup',function(e){
        magnify.innerText = search.value;
        if(magnify.innerText!=''){
            magnify.style.display = 'block';
        }else{
            magnify.style.display = 'none';
        }
    })

    search.addEventListener('blur',function(){
        magnify.style.display = 'none';
    })

    search.addEventListener('focus',function(){
        if(search.value!=''){
            magnify.style.display = 'block';
        }
    })

</script>
</html>