JS实现搜索按钮的点击事件

最新推荐文章于 2024-06-20 23:18:02 发布
最新推荐文章于 2024-06-20 23:18:02 发布
阅读量1.3w 收藏 15
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44538667/article/details/86749082
版权

JS实现搜索按钮的点击事件

开发工具与关键技术：DW  JS
作者：易金亮
撰写时间：2019.02.02

在各个网页或者软件中，往往离不开搜索框以及搜索按钮，下面我们来用JS实现简单的搜索按钮点击事件，如下图：
在这里插入图片描述
我们先通过以上代码编写出一个搜索框和一个搜索按钮，效果如下图所示：
在这里插入图片描述
然后通过JS来实现搜索按钮的点击事件，首先先获取搜索按钮的ID，然后给它一个点击事件，如下图：
在这里插入图片描述
这样当点击搜索按钮时就会弹出一个如下图所示的提示框：
在这里插入图片描述
如果再给它添加一些如下图所示的提问消息的话：
在这里插入图片描述
当点击确定时，就可以出现如下所示的效果了：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
就这样我们就通过JS实现了搜索按钮的点击事件了

北极光LG
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关键词搜索框的单击事件代码(jQuery)
张思阳的博客
04-27 4481
1.功能介绍 在商城的页头中有搜索框，用户可在搜索框中输入关键词(一个或多个)查询相关商品，点击查询图片或按回车键跳转到商品列表页面。 2.代码实现 实现思路： 在用户点击查询图片或点击回车键时，添加单击事件，跳转到关键词搜索的商品列表页面； 同时将用户输入的关键词保留在搜索框中。 搜索查询功能的数据库代码，php处理数据代码 以及 前端加载商品页面代码 已经实现。 jQuer...
原生JS搜索按钮点击的显示与隐藏
weixin_44543312的博客
02-12 1781
开发工具与关键技术：DW JavaScript、jQuery插件 作者：梁茵茵 撰写时间：2019年2月11日 给大家介绍一下
Javascript中点击(click)事件的三种写法
最新发布
忧郁的蛋的专栏
06-20 331
在JavaScript中Click事件是一种常见的用户交互事件,表示用户在网页上点击某个元素的动作,这篇文章主要给大家介绍了关于Javascript中点击(click)事件的三种写法,需要的朋友可以参考下。
JS搜索框相应事件
weixin_30533797的博客
03-09 168
html页面： <input type = "text" name="keyword" id="keyword" onkeydown="entersearch()"/> note：注意不要使用form标签 JS事件： // onclick事件 function search(){ var $keyword = $("#keyword").val();...
js事件
web全栈开发的博客
12-13 354
onclick 事件 元素上发生鼠标点击时触发。 &amp;amp;amp;amp;lt;button onclick=&amp;amp;amp;quot;copyText()&amp;amp;amp;quot;&amp;amp;amp;amp;gt;Copy Text&amp;amp;amp;amp;lt;/button&amp;amp;amp;amp;gt; ondblclick 事件 &amp;amp;amp;amp;lt;button on
原生js实现必应自动搜索功能（事件绑定和事件代理和键盘事件），亲测chrome实现
u014041540的博客
09-13 1630
bing search body{background-color: #333;} .bg-div{position:relative;background-image: url(../river.jpg);width:1228px;height:690px;margin: 0 auto;} .logo{background-image: url(../logo.png);height:
js 根据值查找键
fang156239305的博客
04-30 1992
//根据值查找键 findKey(obj, value, compare = (a, b) => a === b) { return Object.keys(obj).find(k => compare(obj[k], value)) },
JS实现点击按钮后框架内载入不同网页的方法
10-24
主要介绍了JS实现点击按钮后框架内载入不同网页的方法,涉及javascript点击按钮载入页面的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
回车直接实现点击某按钮的效果即触发单击事件
09-04
标题提到的“回车直接实现点击某按钮的效果即触发单击事件”是指用户在输入框中按下回车键时，能够模拟点击某个特定按钮的行为，从而触发该按钮的单击事件。这种功能在很多场景下都很常见，比如搜索引擎的搜索功能，...
原生JS实现顶部导航栏显示按钮+搜索框功能
12-29
根据点击导航栏，搜索框的内容会随之变动 话不多说，先上图 HTML代码段 搜店 地址 优惠券 全文 视频 </div>
JavaScript实现的搜索及高亮显示功能示例
10-19
在本文中，我们将深入探讨如何使用JavaScript实现搜索及高亮显示功能。这个功能通常用于网页上的数据筛选，特别是当数据量较小，无需服务器端处理时。我们将分析提供的代码示例，了解其工作原理，并讨论关键的...
js 监听搜索框输入事件 中文输入
qq_41515189的博客
07-23 483
js 监听搜索框输入事件 中文输入
JS实现页面检索(搜索)功能，类似浏览器搜索
热门推荐
smallWhiteZCY的博客
03-19 1万+
转载网上例子(原地址忘记保存) 查询出后，高亮显示 js代码请自行修改，由于页面只存在两个搜索框，所以js直接获取了Input标签 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>演示：jQuery实现页内查找相关内容</title> <st...
js按钮绑定点击事件
zy_whynot的博客
01-16 9721
1、第一种 $("#btn").click(function(){ 操作 }) 2、第二种 document.getElementById('#foo').addEventListener('click', function(){}); 3、第三种 （1）绑定 <button type="submit" id="btn" οnclick="btn()">btn</butto...
在html中搜索按钮事件,html中<button>绑定点击事件的几种方法介绍
weixin_34177886的博客
06-04 4238
HTML中为button绑定事件的方式有三种。例如以下标签： submit 一、使用jquery进行绑定$('#btn_submit').click(function(){});二、使用原生js绑定，(注意：Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 这类浏览器版本要使用 atta...
原生JS案例——搜索框的搜索数据展示
周百万的博客
10-11 3319
一、主要功能介绍：1、生成UI结构，定义一个数组2、获取表单元素3、创建搜索框的键盘弹起事件4、当在搜索框中输入内容时，遍历数组中的每一个元素，将其中的每一个元素与输入框中输 入的元素相匹配，如果能匹配上就将该内容渲染到提示列表中5、如果输入内容，显示提示列表 ，如果没输入内容，隐藏提示列表6、通过trim() 去掉左右两边的空格，因为空格能匹配所有字符。
点击搜索图标动态缓缓弹出一个搜索框如何实现,运用js和css
weixin_42578963的博客
01-21 689
可以使用 JavaScript 在点击搜索图标时触发事件，并使用 CSS 实现搜索框的动画效果。 使用 JavaScript 监听点击事件，在点击搜索图标时执行相应的函数。 const searchIcon = document.querySelector('.search-icon'); searchIcon.addEventListener('click', function() { ...
原生js实现顶部导航栏显示按钮+搜索框
weixin_44827431的博客
12-24 901
根据点击导航栏，搜索框的内容会随之变动 话不多说，先上图 HTML代码段 <div class="bar"> <ul id="menu" class="menu"> <li class="active">搜店</li> <li class="gradie...
JavaScript（八）
weixin_57276614的博客
02-27 1671
操作元素、节点操作
html 圆角搜索框 按钮事件
06-03
要实现一个带有圆角的搜索框和按钮事件，可以使用 HTML、CSS 和 JavaScript。下面是一个简单的实现步骤： 1. 在 HTML 中创建一个搜索框和一个按钮。 ``` <div class="search-box"> <input type="text" placeholder="搜索..."> <button>搜索</button> </div> ``` 2. 使用 CSS 设置搜索框的样式，包括圆角和背景颜色等。 ``` .search-box { border-radius: 20px; background-color: #eee; overflow: hidden; } .search-box input { border: none; outline: none; padding: 10px; width: 80%; float: left; } .search-box button { border: none; outline: none; background-color: #333; color: #fff; padding: 10px 20px; float: left; cursor: pointer; } ``` 3. 使用 JavaScript 给按钮添加点击事件，获取搜索框中的文本并进行搜索。 ``` var btn = document.querySelector(".search-box button"); var input = document.querySelector(".search-box input"); btn.addEventListener("click", function() { var searchText = input.value; // 进行搜索操作 }); ``` 通过以上步骤，我们可以实现一个带有圆角搜索框和按钮事件的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值