Vue 监听回车键实现搜索功能示例

r囧r小猫 2023-10-07 08:21 79阅读 0赞

## 代码实现 ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 监听回车键实现搜索功能示例</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
        <input type="text" @keyup.enter="searchEnterFun" placeholder="搜索">
    </div>
    <script type="text/javascript">
        var vm = new Vue({
         
            el: '#app',
            data: {
         
            },
            methods: {
         
                searchEnterFun:function(e){
         
                    // 使用 which 和 keyCode 属性来解决兼容问题
                    var keyCode = window.event? e.keyCode:e.which;
                    var val = e.target.value;
                    console.log('回车搜索',keyCode,e);
                    if(keyCode == 13 && val){
         
                        alert(val);
                    }
                }
            }
        })
    </script>
    </body>
    </html>

## 注意 ##

*  `which` 和 `keyCode` 属性提供了解决浏览器的兼容性的方法。
 *  `keyCode`属性返回`onkeypress`事件触发的键的值的字符代码，或者 `onkeydown` 或 `onkeyup` 事件的键的代码
 *  在 Firefox 中，keyCode 属性在 onkeypress 事件中是无效的 (返回 0)。浏览器兼容问题，可以一起使用 which 和 keyCode 属性来解决：

var keyCode = window.event ? e.keyCode:e.which;

发表评论取消回复

表情：

评论列表（有 0 条评论，79人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 监听回车键实现搜索功能示例

代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

r囧r小猫/ 2023年10月07日 08:21/ 0 赞/ 80 阅读

相关 Vue前端实现搜索功能

[https://blog.csdn.net/weixin\_41655541/article/details/96133804][https_blog.csdn.net_we

本是古典何须时尚/ 2023年02月22日 05:06/ 0 赞/ 99 阅读

相关 jquery实现回车键登录/搜索等确认功能

button按钮提交方式： ![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg

你的名字/ 2023年02月14日 10:22/ 0 赞/ 100 阅读

相关 js 回车键触发搜索

document.onkeydown = function (event) { e = event ? event : (window.even

女爷i/ 2022年12月26日 10:16/ 0 赞/ 240 阅读

相关 JComboBox监听回车键

参考文章：[JComboBox监听回车键][JComboBox] JComboBox是一个容器控件，直接对其添加键盘监听是没有效果的。而应找到其编辑器，在编辑其上添加监听。如

青旅半醒/ 2022年09月10日 02:23/ 0 赞/ 253 阅读

相关回车键搜索

[![image][]][image] 一个搜索框，点击放大镜图标时候会调用搜索的js函数。希望在键盘输入回车时候，也可以调用搜索的js函数。参考 $(docu

梦里梦外;/ 2022年05月21日 02:37/ 0 赞/ 291 阅读

相关 JS监听回车键

1、JS监听某个输入框 //回车事件绑定 $('text').bind('keypress', function(event) { if

骑猪看日落/ 2022年03月19日 03:43/ 0 赞/ 654 阅读

相关 Input监听键盘回车键

/ 监听键盘的enter键 @param e / onKeyUp = (e) => {

我会带着你远行/ 2022年03月09日 14:26/ 0 赞/ 759 阅读

相关 vue实现搜索功能

> 前言：最近小编也是刚跳槽新的公司一个月，前端技术栈是vue+element也是市面上比较常用的框架之一了，同时也花费一点时间总结一下最近的坑，react转vue的一个过程确

Love The Way You Lie/ 2022年01月22日 06:01/ 0 赞/ 500 阅读

相关 Vue搜索功能

Vue搜索功能知识点：v-model数据双向绑定，绑定对象是input @keyup="seachup()"是键盘事件菜单列表显示搜索效果图1： ![在这

拼搏现实的明天。/ 2021年09月18日 19:40/ 0 赞/ 534 阅读