input 搜索框添加回车触发搜索事件

工作需要给项目中所有的 input 搜索框添加回车触发搜索事件的函数除了一个一个替换有什么方便的方法么

<template>
  <div>
    <h1>首页</h1>
    ---------------------------------------------------------------
    <input type="text" v-model="list" />
    <button @click="onSubmit(list)"></button>
  </div>
</template>

<script>
export default{
  data() {
    return {
      list: "",
    };
  },
  methods: {
    onSubmit(value) {
      console.log(value);
    },
  },
};
</script>

原生项目最好还是老老实实加吧。框架里还可以封装个组件。
加回车事件可以用form 实现
https://blog.csdn.net/weixin_44058725/article/details/130154835

如果您想让输入框在按下回车键时触发搜索事件，可以使用以下代码：
<input type="text" @keyup.enter="search" />

@keyup.enter表示监听键盘按下状态，当按下回车键时触发search方法。如果您使用的是Element UI组件库的输入框，可以使用以下代码：
<el-input @keyup.enter.native="search" />

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7411031
这篇博客你也可以参考下：在input输入框中回车点击按钮事件
除此之外, 这篇博客: 【input】输入框事件总结中的 输入框相关事件写法： 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

常用的事件总结

事件	功能
`onfocus`（常用）	input标签`获取焦点`事件
`onblur`（常用）	input`失去焦点`事件（触发条件：`先获取`焦点，`再失去`焦点触发）
`onchange`	input`失去焦点`并且它的`value`值发生`变化`时触发
`oninput`	input框`输入过程中`value值`改变时`实时触发，换句话说就是每输入一个字符都会触发
`onclick`	input标签`type="button"`时的点击事件
`onkeydown`	input框输入时键盘按钮`按下事件`
`onkeyup`	input框输入时键盘按钮`抬起事件`，触发`onkeyup`事件之前一定触发`onkeydown`事件
`onselect`	input标签内容选中时`触发`事件

JavaScript语法：

JS绑定事件写法：

document.getElementByTagName(‘input’).onfocus = function();

$("#XXX").onchange(){  }

您还可以看一下朱有鹏老师的input子系统基础之按键-linux驱动开发第8部分课程中的 5.8.2.input设备应用层编程实践1小节, 巩固相关知识点

以下回答由chatgpt基于相关博客总结生成:

答案：

可以通过遍历页面上的所有input搜索框，为其绑定回车事件，达到一次性处理的目的。具体步骤如下：

使用document.querySelectorAll()选择器查找所有的input搜索框元素，并将其保存在一个数组中。
对于每一个搜索框元素，添加一个keydown事件处理程序，检测用户是否按下enter键，如果按下，则调用搜索功能。
搜索功能可以根据实际需求进行编写，可以是后端发起ajax请求，也可以是前端直接过滤页面元素等等。

下面是代码示例：

// 查找所有的input搜索框
const inputElements = document.querySelectorAll('input[type="search"], input[type="text"]');

// 遍历搜索框，并为其添加回车事件处理程序
inputElements.forEach(function(input) {
  input.addEventListener('keydown', function(event) {
    if (event.keyCode === 13) {   // 如果按下了回车键
      event.preventDefault();    // 阻止默认行为
      performSearch(input.value); // 执行搜索功能
    }
  });
});

// 搜索功能示例：控制台输出用户输入的内容
function performSearch(value) {
  console.log('Performing search for: ' + value);
}

参考资料中的段落都与该问题无关。

input 搜索框 添加回车触发 搜索事件

input 搜索框添加回车触发搜索事件