前端实现回车键触发搜索

前端实现回车键触发搜索

    • 前言
    • 实现方法
      • 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) { //回车键的键值为13alert("值是: " + val.value);}};submit.onclick = function () {alert("值是" + val.value);}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/601788.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【100条sqlite3常用命令】

.open filename - 打开或创建一个SQLite数据库文件.tables - 列出当前数据库中的表.schema tablename - 查看指定表的创建语句.header on|off - 设置是否显示查询结果的列名.mode csv|column|json - 设置查询结果的显示模式.import filename tablename - 从文件导入数据到指定表…

通过IP地址防范钓鱼网站诈骗的有效措施

随着互联网的普及,钓鱼网站诈骗成为一种广泛存在的网络犯罪行为。通过冒充合法网站,攻击者试图窃取用户的敏感信息。本文将探讨如何通过IP地址防范钓鱼网站诈骗,提供一系列有效的措施,以加强网络安全,保护用户免受诈骗…

css 保持元素宽高比 随页面宽度变化高度自适应

目录 1.效果展示 2.代码内容 3.代码解析 &#xff08;1&#xff09;分析inner类写法 &#xff08;2&#xff09;分析container类写法 1.效果展示 2.代码内容 <div class"item"><div class"inner"><di class"container">…

静态网页设计——极乐迪斯科(HTML+CSS+JavaScript)

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 感谢大佬的视频&#xff1a; https://www.bilibili.com/video/BV11k4y1X7mH/?vd_source5f425e0074a7f92921f53ab87712357b 使用技术&#xff1a;HTMLCSSJS&#xff08;…

游戏策划:游戏开发中的关键环节

在数字游戏的世界里&#xff0c;游戏策划是构建一个成功游戏的基石。游戏策划不仅仅是一个创意过程&#xff0c;它涉及从故事构建到技术实现的各个方面。以下是游戏策划中需要重点关注的几个重要内容。 1. 故事情节与世界观构建 一款游戏的魅力很大程度上取决于其故事情节和世…

MySQL四大引擎,数据库管理,数据表管理,数据库账号管理

MySQL四大引擎 InnoDB InnoDB引擎是MySQL默认的存储引擎。它支持事务和行级锁定&#xff0c;并具有高并发性和数据完整性保护的特性。InnoDB适用于具有复杂查询和高并发读写操作的应用程序。MyISAM InnoDB引擎特点和优势 事务支持&#xff1a;InnoDB支持ACID&#xff08;原子…

HDMI彩条显示实验与方块移动实验

一、HDMI接口简介 一种数字音视频接口标准&#xff0c;提供高质量的数字音视频传输&#xff0c;同时支持多通道音频、高分辨率视频和其他数据传输功能。提供更高的数据传输带宽&#xff08;带宽&#xff1a;1s内传输多少比特数据&#xff09; 数字传输&#xff1a; HDMI是一种全…

C++:类和对象(3)

目录 1.构造函数调用规则 2.深拷贝和浅拷贝 3.初始化列表 4.类对象作为类成员 1.构造函数调用规则 默认情况下&#xff0c;C编译器至少给类添加三个函数&#xff1a; 1.默认构造函数(无参&#xff0c;函数体为空) 2.默认析构函数(无参&#xff0c;函数体为空) 3.默认拷贝构…

标签函数 - 打造JavaScript组件

&#x1f4e2; 鸿蒙专栏&#xff1a;想学鸿蒙的&#xff0c;冲 &#x1f4e2; C语言专栏&#xff1a;想学C语言的&#xff0c;冲 &#x1f4e2; VUE专栏&#xff1a;想学VUE的&#xff0c;冲这里 &#x1f4e2; CSS专栏&#xff1a;想学CSS的&#xff0c;冲这里 &#x1f4…

C++返回值、返回引用、返回地址

函数内的对象的保留和处理&#xff1a; 1.当函数结束时&#xff0c;所有除了堆中的对象之外的函数成员&#xff0c;全部都会被处理掉&#xff0c;无法保留。 2.在返回过程中&#xff0c;无论是引用、指针、还是值&#xff0c;只要是跟在return后面的&#xff0c;都会以复制的方…

Flutter 混合开发 - aar打包

背景 项目接入 Flutter 后有两种方式&#xff0c;一种是 module 引入开发&#xff0c;一种是 aar 依赖开发。当前项目中在 Debug 阶段为了方便调试采用 module 开发&#xff0c;在发版时&#xff08;即 Release 阶段&#xff09;采用 aar 依赖引入。为了配合这种模式就需要在 …

高可用分布式部署Spark、完整详细部署教程

前言 Spark 是 UC Berkeley AMP Lab 开源的通用分布式并行计算框架。 Spark基于map reduce算法实现的分布式计算&#xff0c;拥有Hadoop MapReduce所具有的优点&#xff1b;但不同于MapReduce的是Job中间输出和结果可以保存在内存中&#xff0c;从而不再需要读写HDFS&#xff…

Spring AI和Ollama

概述 Spring AI 不仅提供了与 OpenAI 进行API交互&#xff0c;同样支持与 Ollama 进行API交互。Ollama 是一个发布在GitHub上的项目&#xff0c;专为运行、创建和分享大型语言模型而设计&#xff0c;可以轻松地在本地启动和运行大型语言模型。 Docker环境安装Ollama 1.获取D…

代码随想录:贪心算法

455. 分发饼干 解题步骤 排序&#xff1a;给两个数组排序举例判断&#xff1a;看第一个情况不满足&#xff0c;要换孩子还是换物品&#xff1f; a. 换孩子→遍历孩子 b. 换物品→遍历物品 实战&#xff1a; 选择从小到大排序第一个不满足&#xff0c;我要换物品。因为换了孩…

AIGC带给开发者的冲击

未来会有两种开发者&#xff0c;一种是会使用AIGC工具的开发者另一种是不会使用AIGC的开发者&#xff0c;AIGC的出现提高了开发效率和代码质量&#xff0c;对开发者意味着需要不断学习和适应新的技术和工作范式&#xff0c;开发者可以把更多的精力放在高级抽象的定义以及更高维…

【C程序设计】C enum(枚举)

枚举是 C 语言中的一种基本数据类型&#xff0c;用于定义一组具有离散值的常量&#xff0c;它可以让数据更简洁&#xff0c;更易读。 枚举类型通常用于为程序中的一组相关的常量取名字&#xff0c;以便于程序的可读性和维护性。 定义一个枚举类型&#xff0c;需要使用 enum 关…

JS的防抖和节流

目录 防抖 搜索框带来的问题 实现的思路 案例 封装防抖函数 节流 滚动条加载带来的问题 实现的思路 案例 封装节流函数 防抖 搜索框带来的问题 需求&#xff1a;根据输入框内容来请求数据 <!DOCTYPE html> <html lang"en"> <head><…

STHS34PF80人体存在传感器(1)----获取人体存在状态

STHS34PF80人体存在传感器.1--获取人体存在状态 概述视频教学样品申请完整代码下载主要特点硬件准备接口最小系统图生成STM32CUBEMX串口配置IIC配置CS设置串口重定向参考案例获取ID温度测量滤波方式智能识别算法使用块数据更新&#xff08;BDU&#xff09;功能设置ODR速率获取状…

Stable Diffusion架构的3D分子生成模型 GeoLDM - 测评与代码解析

之前&#xff0c;向大家介绍过3D分子生成模型 GeoLDM。 GeoLDM按照Stable Diffusion架构&#xff0c;将3D分子生成的扩散过程运行在隐空间内&#xff0c;优化了基于扩散模型的分子生成。可能是打开Drug-AIGC的关键之作。让精确控制分子生成有了希望。 详见&#xff1a;分子生成…

Python 中的==操作符 和 is关键字

Python是一种功能强大的通用编程语言&#xff0c;提供了各种比较值和对象的方法。其中包括操作符和is关键字&#xff0c;它们的用途不同&#xff0c;但由于它们有时可以达到相同的目的&#xff0c;所以经常会被混淆。在本文中&#xff0c;我们将深入研究和is之间的区别&#xf…