html 搜索框 回车搜索,给搜索框添加回车事件

最新推荐文章于 2024-06-07 18:06:56 发布
最新推荐文章于 2024-06-07 18:06:56 发布
阅读量1k 收藏 1
点赞数
文章标签： html 搜索框 回车搜索
本文介绍如何为HTML搜索框添加回车事件，实现点击回车即可进行搜索的功能。通过JavaScript代码示例，包括两种不同的事件监听方法：document.onkeydown 和 $('#gover_search_key').bind('keypress')，当检测到回车键（keyCode 13）时调用搜索函数，同时阻止默认的页面刷新行为，确保搜索操作能够顺利执行。
摘要由CSDN通过智能技术生成

43b69cb06169023f492ab48867a8f56a.pngfunction search(){

//alert("test");

keyword=$("#gover_search_key").val();

turnkeyword = escape(keyword);

kuaizhao.href="snapshot.html?a="+turnkeyword;

liebiao.href="search.html?a="+turnkeyword;

str=8;

$.ajax({

type:"GET",

url:'search.php',

dataType:"json",

data:{'keyword':keyword,'page':str

},

success: function (data) {

//alert("test");

var html='';

inum=8;

if(inum>eval(data)[0][4][0])

{inum=eval(data)[0][4][0];}

for(i=0;i

html=html+'

最低0.47元/天 解锁文章
英论阁Enago科研作者服务
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端实现 input 回车搜索（html,vue,react实现）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
04-17 5839
前端实现 input 回车搜索（html,vue,react实现） form表单实现 keyup监听实现
输入框的回车搜索事件实现
weixin_48745613的博客
07-08 2814
input搜索框
html页面如何实现键盘“回车键”触发搜索功能
最新发布
北京_小杰的博客
06-07 137
【代码】html页面如何实现键盘“回车键”触发搜索功能。
html+js仿百度搜索框，点击和回车跳转百度搜索
集电极
10-28 4187
html+js仿百度搜索框，点击和回车跳转百度搜索 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .container { width: 500px;
给搜索框绑定回车搜索事件
douyabb的博客
05-03 2662
搜索框没有搜索按钮的时候 就要绑定回车搜索事件 但是只有一个input的时候 按回车默认是提交事件 &lt;div class="col-sm-offset-8 col-sm-3"&gt; &lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt; &lt;input type="text" id="searc
iview中select设置多选可搜索获取写入内容添加回车事件怎么写？？？
熟悉 vue2 vue3 jquery js echarts
06-10 929
html部分 <Select ref="ref1" @on-query-change="queryChange" v-on:keyup.enter.native="searchWeibo" :label-in-value="true" v-model="setFormItem.myTab" :multiple="true" filterable> <Option v-for="item in BaseTab
jQuery搜索框实例绑定提交事件.zip
07-11
jQuery搜索框实例绑定提交事件是一款下拉选择多种搜索引擎分类，搜索框输入文字键盘回车绑定提交搜索按钮代码。    dropdown-toggle search-select" data-toggle="dropdown">百度搜索  ...
React.js搜索框文字筛选实例
07-24
// 搜索框的onChange事件处理器 const handleSearchChange = (e) => { setSearchText(e.target.value); // 根据关键字筛选数据 setFilteredData( initialData.filter(item => item.text.toLowerCase()....
datatables搜索框修改为回车事件触发
09-09
修改了js代码，避免了频繁请求后台，下载后直接覆盖原有的js即可使用 修改了js代码，避免了频繁请求后台，下载后直接覆盖原有的js即可使用 修改了js代码，避免了频繁请求后台，下载后直接覆盖原有的js即可使用 ...
Android实现实时搜索框功能
01-04
AutoCompleteTextView，自动完成文本框。 用于实现允许用户输入一定字符后，显示一个下拉菜单，供用户从中选择，当用户选择某个选项后，按用户选择自动填写该文本框。 该组件继承EditText，所以它支持EditText组件...
分类搜索框网页特效推荐
11-10
6. ARIA 角色和属性：为了提升无障碍性，需要为搜索框添加合适的ARIA属性，如`aria-label`和`aria-haspopup`，以便屏幕阅读器用户理解搜索框的功能。 7. 数据管理：如果搜索条件复杂，可能需要设计数据结构来存储和...
html增加点击进入,html中实现回车或点击进入-----Mr.Zhang
weixin_39838829的博客
06-19 333
首先，允许我这么称呼它们两个为兄弟。之所以这么称呼，是因为它们之间执行的是相同的任务----- 点击按钮。然而，它们也有不同之处，次不同之处又使得它们貌似有些调用的意思。接下来，让我来给大家说一下二者的关系，我们不妨举个例子来说明：请看如下代码：此代码为登录界面，两个输入框：一个为输入名字，另一个为输入密码。一个button ,id为loginbutton。至于这个button是什么样，我们暂时不...
html上绑定回车事件,js/jquery中input 绑定回车enter事件的代码
weixin_42522750的博客
06-09 2299
方法一：jQuery监听input回车键实现点击回车进行查询$(".input-cname").keypress(function(e){if(e.which==13){ReloadData();}});方法二：js中input 绑定回车事件scriptfunctiononKeyPress(e){varkeyCode=null;if(e.which)keyCode=e.w...
jQuery实现键盘回车搜索功能
徊忆羽菲
03-22 2888
jQuery实现键盘回车搜索功能html代码搜索按钮实现键盘回车实现搜索 html代码 <div class="fl search-box"> <button type="button" name="btnSubmit" id="btnSubmit" class="btnSubmit">搜索</button> <input id="sousuo" name="sousuo" type="search" placeholder="输入搜索内容"
js 搜索框按回车进行搜索
li_csdn_的博客
07-17 1万+
1.不能使用form表单 2.监控键盘响应并使用trigger触发响应事件即可
html页面回车事件
初学者的专栏
08-13 1万+
&lt;li&gt;&lt;input type="text" id="account" name="account" placeholder="请输入用户名"&gt;           &lt;span class="falsehints" id="namets" style="display:none"&gt;用户
在html输入框中响应enter键盘------介绍重要的onkeydown方法实现“模糊查找”
热门推荐
认知 行动 坚持
03-06 3万+
         在html输入框中响应enter键， 这本来就是很简单的问题， 但我查了一下网上资料， 多数写的有点复杂， 其实， 用onkeydown即可搞定， 如下：   &lt;html&gt; &lt;body&gt; &lt;input onkeydown="if(event.keyCode==13) {test()}"/&gt; &lt;script&gt; functio...
html输入框中响应enter键盘------重要的onkeydown方法实现“模糊查找”
FurtherSkyQ的博客
05-14 1599
在html输入框中响应enter键， 这本来就是很简单的问题， 但我查了一下网上资料， 多数写的有点复杂， 其实， 用onkeydown即可搞定， 如下： <html> <body> <input onkeydown="if(event.keyCode==13) {test()}"/> <sc...
搜索框的回车事件怎么写
04-04
如果你用的是HTML input标签，可以监听input的keydown事件，如果keyCode为13，就执行搜索操作。 HTML: ``` <input type="text" id="search-input"> ``` JavaScript: ``` const searchInput = document.getElementById('search-input'); searchInput.addEventListener('keydown', function(event) { if (event.keyCode === 13) { //执行搜索操作 } }); ``` 如果你用的是框架，如React，可以使用onKeyDown事件。 React: ``` function SearchBox(props) { function handleKeyDown(event) { if (event.keyCode === 13) { //执行搜索操作 } } return ( <input type="text" onKeyDown={handleKeyDown} /> ); } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值