100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 百度搜索框代码 实现回车点击 跳转到新页面 简单

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

时间:2020-10-17 17:10:38

相关推荐

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

参考网站:/

上图为实现效果

代码如下:

<script>function butClick() {var val = document.getElementById("search_key").value;if(val.length === 0){alert('搜索为空,请输入内容');return false;}else{var open_url = "/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 = "/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 = "/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站长论坛:小千 ,个人主页/home.php?mod=space&uid=10367,的无私解决问题,感谢感谢!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。