前端实现 input 回车搜索（html,vue,react实现）

最新推荐文章于 2024-03-29 19:05:28 发布

崽崽的谷雨

最新推荐文章于 2024-03-29 19:05:28 发布

阅读量5.1k

点赞数 1

分类专栏： React html Vue 文章标签：前端 vue.js react.js html

本文链接：https://blog.csdn.net/weixin_44058725/article/details/130154835

版权

React 同时被 3 个专栏收录

77 篇文章 8 订阅

订阅专栏

Vue

34 篇文章 7 订阅

订阅专栏

html

28 篇文章 1 订阅

订阅专栏

前言：

搜索框是个常见的功能，除了用ui库，有的时候必须要自己封装（因为改ui库太麻烦了，定制化要求很高），所以涉及到点击按钮搜索和回车搜索都要实现。下面就是实现的一些方法。

效果图

实现方法：

html里：

方式一：html里可以用 form 来实现，因为form里回车也能触发提交事件。思路就是 form里包裹 input,和一个button ，button的type要设置成 submit(必须设置)。

<!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>
</head>
<body>
    <form action="">
        <input type="text" name="" id="val">
        <button type="submit" id="sub">搜搜</button>
    </form>
</body>
<script>
    let submit=document.getElementById("sub");
    let val=document.getElementById("val");
    submit.addEventListener("click",()=>{
       alert("值是"+val.value)
    });


</script>
</html>

方式二：

采用原生的方法利用 keyup判断键盘码keyCode==13。

<!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>
</head>

<body>
   
        <input type="text" name="" id="val">
        <button id="sub">搜搜</button>
    
</body>
<script>
    let submit = document.getElementById("sub");
    let val = document.getElementById("val");
    
    val.onkeyup = function (event) {
        var e = event || window.event;
        if (e && e.keyCode == 13) { //回车键的键值为13
            alert("值是" + val.value);
        }
    };

    submit.onclick = function () {
        alert("值是" + val.value);
    }


</script>

</html>