前端实现回车键触发搜索

前端实现回车键触发搜索

    • 前言
    • 实现方法
      • 1. html里可以用 form 来实现
      • 2. 非form中的input

前言

搜索框是个常见的功能,除了用现有的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);
    }

你可能感兴趣的:(前端,前端,javascript)