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

• 前端

前言：

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

效果图

实现方法：

html里：

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



    
    
    
    搜索框


    
        
        
    


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

 方式二：

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




    
    
    
    搜索框



   
        
        
    


    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);
    }

vue里：

vue里其实还是很简单的 因为 他有 按键修饰符 @keyup.enter.native=”seachEnter” 所有不做赘述。

当然 html 里的两个方法同样适用。只需要 改变 一点写法 。切记用方式 二时要在组件销毁时移除 监听事件。

react里：

当然 html 里的两个方法同样适用。只需要 改变 一点写法 。切记用方式 二时要在组件销毁时移除 监听事件。

总结：

综上vue里可以直接用按键修饰符，react、html里推荐用 form, 就算用 keycode也要记得 在组件销毁时移除 keyup事件。

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/b1774646ed.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐