百度搜索框代码，实现回车点击，跳转到新页面，简单

参考网站：https://110.nanshiw.com/

上图为实现效果

代码如下：

<script>
function butClick() {var val = document.getElementById("search_key").value;if(val.length === 0){alert('搜索为空，请输入内容');return false;}else{var open_url = "https://www.baidu.com/s?ie=utf-8&wd=" + val;window.open(open_url); }
}
document.onkeydown = function (e) {var theEvent = window.event || e;var code = theEvent.keyCode || theEvent.which || theEvent.charCode;if (code == 13) {butClick();}
}
</script>
<div class="layui-clear">
<a href="" class="baidulogo" target="_blank"> <img src="/www_moban_kim-images/bd_logo.png"></a>
<input type="search" id="search_key">
<a class="btn" target="_blank"  href="javascript:void(0)" onclick="butClick();">百度一下</a> </div>

上面代码简单解释一下，其中下面代码

<script>
function butClick() {var val = document.getElementById("search_key").value;if(val.length === 0){alert('搜索为空，请输入内容');return false;}else{var open_url = "https://www.baidu.com/s?ie=utf-8&wd=" + val;window.open(open_url); }
}
document.onkeydown = function (e) {var theEvent = window.event || e;var code = theEvent.keyCode || theEvent.which || theEvent.charCode;if (code == 13) {butClick();}
}
</script>

js获取到表单的数据，把获取到的，数据和百度搜索URL拼接，然后直接跳转到百度

<div class="layui-clear">
<a href="" class="baidulogo" target="_blank"> <img src="/www_moban_kim-images/bd_logo.png"></a>
<input type="search" id="search_key">
<a class="btn" target="_blank"  href="javascript:void(0)" onclick="butClick();">百度一下</a> </div>

上面这段是样式，也就是开头最终实现的样子

这段代码中javascript:void(0)" οnclick="butClick(); 这个是不能变更的，如果你是大神，变更成什么样子，你可以自己来，我不是大神，建议不要更改

下面的代码是直接搜索，不跳转到新页面的

<script>
function butClick() {var val = document.getElementById("search_key").value;if(val == "" || val == null || val == 'undefined'){alert('搜索为空，请输入内容');return false;}else{window.location.href = "https://www.baidu.com/s?ie=utf-8&wd=" + val;}
}
document.onkeydown = function (e) {var theEvent = window.event || e;var code = theEvent.keyCode || theEvent.which || theEvent.charCode;if (code == 13) {butClick();}
}
</script>
<div class="layui-clear">
<a href="" class="baidulogo" target="_blank">
<img src="/www_moban_kim-images/bd_logo.png"></a>
<input type="search" id="search_key">
<a class="btn" target="_blank"  href="javascript:void(0)" onclick="butClick();">百度一下</a>
</div>

这个代码感谢大神：4414站长论坛：小千，个人主页https://www.4414.cn/home.php?mod=space&uid=10367，的无私解决问题，感谢感谢！

百度搜索框代码，实现回车点击，跳转到新页面，简单相关推荐

react如何跳转html页面,react中实现点击跳转到新页面方法
实现点击跳转到新页面,可以有两种形式,一个是本地页面打开,一个是本地页面不变跳转到新的页面. (一)页面点击本地页面打开新页面引入ant的Button组件 onClick={()=>{wind ...
php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery
先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: CSS: .autoSearchText{ border:solid 1px #CFCFCF; he ...
百度搜索框代码（有下拉提示的）
根据不同类型的网站需求,我们一共提供三种引入方式供您选择: ·简单方式--方便的将"百度搜索框(带提示功能)"直接加入到您的网页中. 将以下代码加入到您的网页中,即可获得带有&qu ...
php网页制作中搜索框的代码,在网页里嵌入百度搜索框功能
今天发现某个网站是直接使用百度搜索作为自己网站的搜索功能的,感觉这个挺好玩的,不需要去研究复杂的搜索算法而又直接使用了百度搜索这个强大的搜索引擎为自己撑腰.无论对自己还是对用户来说都是相当不错的选择, ...
站长工具|百度搜索框提示功能
百度向站长开放免费"百度搜索框"代码和"百度搜索框提示"代码.只需进行简单的设置, 即可将" 百度搜索框( 带提示功能)"功能快速加入到您的 ...
html+js仿百度搜索框，点击和回车跳转百度搜索
html+js仿百度搜索框,点击和回车跳转百度搜索代码 <!DOCTYPE html> <html lang="en"> <head>< ...
京东搜索框html,京东添加搜索框代码模块点击搜索按钮失效提示您访问的页面失联啦的处理方法...
京东店铺装修搜索框模块时搜索框按钮点击无效无法搜索.不少美工在京东店铺装修过程中自定义设计安装的搜索框加好链接后点击搜索框按钮提示抱歉!您访问的页面失联啦-是怎么回事?是加的搜索框地址不对吗?那么要怎 ...
html5搜索框在最右侧,html5搜索框特效点击搜索框弹出分类搜索框代码
特效描述:html5搜索框特效点击搜索框弹出分类搜索框.点击搜索框弹出分类搜索框代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Search People Sara Soue ...
仿百度搜索框–jQuery版本
仿百度搜索框–jQuery版本时维九月,序属三秋.此吾工作三个月之日,亦是吾重拾博客之时.一路坎坷走来,经历良多,收获甚多. 正题百度搜索框是企业开发中常用的一项功能,作为一个前端工作者,自然也是 ...
jQuery实现百度搜索框
最近项目需求,写了一个类似百度搜索框的功能. 把代码整理了一遍,然后分享出来给大家看看,如果有不对的地方请多指教. 实现效果使用的语言:html,css,JavaScript,jQuery 代码部分 ...

百度搜索框代码，实现回车点击，跳转到新页面，简单

百度搜索框代码，实现回车点击，跳转到新页面，简单相关推荐

最新文章

热门文章