JavaScript实现智能搜索框

最新推荐文章于 2024-06-28 13:39:22 发布

CSU迦叶

最新推荐文章于 2024-06-28 13:39:22 发布

阅读量3.3k

点赞数 2

分类专栏： JavaScript案例文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44997802/article/details/121222947

版权

JavaScript案例专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该博客讨论了如何优化网页搜索框的用户体验。通过监听keyup事件，当用户按下's'或'S'键时，搜索框自动获取焦点。同时，当用户在搜索框内输入内容时，会在上方以大号字体显示，提供清晰的预览。当搜索框失去焦点且无内容时，预览内容会隐藏。这个实现增加了搜索框的易用性和可访问性。

摘要由CSDN通过智能技术生成

应用场景：

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>