前端实现回车键触发搜索

原创已于 2024-01-05 15:40:23 修改 · 1.8k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

于 2024-01-05 15:31:05 首次发布

前端专栏收录该内容

69 篇文章

订阅专栏

本文介绍了在HTML中使用form和非form元素的input实现回车搜索功能的方法，包括form表单的submit事件和非form输入框的keyup和onclick事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端实现回车键触发搜索

前言

搜索框是个常见的功能，除了用现有的ui组件库，有的时候必须要自己封装，所以涉及到点击按钮搜索和回车搜索都要实现

实现方法

1. html里可以用 form 来实现

button必须是submit类型

let submit=document.getElementById("sub");
    let val=document.getElementById("val");
    submit.addEventListener("click",()=>{
        alert("值是"+val.value)
    });

2. 非form中的input

let submit = document.getElementById("sub");
    let val = document.getElementById("val");
    val.onkeyup = function (event) {
        var e = event || window.event;
        console.log(event.keyCode);
        if (e && e.keyCode == 13) { //回车键的键值为13
            alert("值是: " + val.value);
        }
    };
    submit.onclick = function () {
        alert("值是" + val.value);
    }